The difference between ajax, axios, fetch, and the advantages and disadvantages

1、jQuery ajax 

1 $.ajax({
2    type: 'POST',
3    url: url,
4    data: data,
5    dataType: dataType,
6    success: function () {},
7    error: function () {}
8 });

Advantages and disadvantages:

Itself is programmed for the MVC, MVVM does not meet the current wave of front-end
based on the native XHR development, XHR architecture itself is not clear, have an alternative to fetch
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

 1 axios({
 2     method: 'post',
 3     url: '/user/12345',
 4     data: {
 5         firstName: 'Fred',
 6         lastName: 'Flintstone'
 7     }
 8 })
 9 .then(function (response) {
10     console.log(response);
11 })
12 .catch(function (error) {
13     console.log(error);
14 });

Advantages and disadvantages:

Created from a node.js http request
support Promise API
client support to prevent CSRF
provides a number of concurrent requests interface (important, convenient for a lot of operations)

3、fetch

1 try {
2   let response = await fetch(url);
3   let data = response.json();
4   console.log(data);
5 } catch(e) {
6   console.log("Oops, error", e);
7 }

Advantages and disadvantages:

In line with separation of concerns, no input, output, and status events to track objects in the mix in a
better and more convenient wording
more underlying, rich API provided (request, response)
from the XHR, ES is the norm in the new implementation mode
1) fetchtch only given to the network a request, 400, 500 are of a successful request as required to handle the package
2) fetch is not the default band Cookie, you need to add the configuration item
3) fetch ABORT is not supported, are not supported timeout control, using setTimeout and timeout control achieved Promise.reject the 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

 

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

Create XMLHttpRequest from the browser
issue http request from node.js
support Promise API
to intercept requests and responses
conversion request and response data
cancellation request
automatically convert JSON data
client support to prevent CSRF / XSRF