axios ajax fetch differences, advantages and disadvantages

The jQuery's ajax, axios and fetch make a simple comparison, so-called eyes of the beholder wise see wisdom, which is the end-use at their discretion

1.jQuery ajax

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});

Advantages and disadvantages:

• Itself is programmed for the MVC, does not meet the current wave of front-end MVVM
• Based on the development of native XHR, XHR architecture itself is not clear, have an alternative to fetch the
• JQuery entire project is too large, simply have to use the introduction of the entire JQuery ajax very unreasonable (take personalized packaging solutions can not enjoy the CDN service)

2.axios

axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

Advantages and disadvantages:

• Create a http request from node.js
• Support Promise API
• Client support to prevent CSRF
• Provides interfaces concurrent requests (an important, convenient for a lot of operations)

3.fetch

try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch(e) {
  console.log("Oops, error", e);
}

Advantages and disadvantages:

• In line with separation of concerns, no input, output, and status tracking of events mixed in one object in
• Better and more convenient wording
• More bottom, rich API provided (request, response)
• Out of the XHR, ES is the norm in the implementation of the new
• 1) fetchtch only given to the network a request, 400, 500 are of a successful request as required to handle the package
• 2) fetch default will not take cookie, you need to add configuration items
• 3) fetch does not support abort, does not support timeout control, use setTimeout and Promise.reject achieve control of the timeout request does not stop the process continues to run in the background, causing the amount of waste
• 4) fetch no way to monitor the progress of native request, and can XHR

Why axios?

axios HTTP client is a browser-based Promise and nodejs, which itself has the following characteristics:

• Create XMLHttpRequest from the browser
• Http requests sent from node.js
• Support Promise API
• Intercept request and response
• Conversion request and response data
• Cancellation request
• Automatically convert JSON data
• Client support to prevent CSRF / XSRF