Title III, ajax and axios, the difference fetch

1.jQuery ajax

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

Ajax refers to the traditional short XMLHttpRequest (XHR), send the request back-end technology first appeared, under the native js, the core using the XMLHttpRequest object, between multiple requests if there has relations, it would appear callback hell.
jQuery ajax is a package of native XHR, and in addition also added to the payment of JSONP. After years of maintenance updates, really has a very convenient, the advantage goes without saying; If you insist cite a few shortcomings, it may be:

1. Itself is programmed for the MVC, MVVM does not meet the wave of the present.
2. Based on the development of native XHR, XHR architecture itself is not clear.
3. jQuery entire project is too large, simply have to use ajax introduced throughout the jQuery very unreasonable (take personalized packaging solutions can not enjoy the CDN service)
4. Does not comply with the principle of classification concerns (Separation of Concerns) of
5. Configuration and method calls very confusing, and asynchronous event-based model is not very friendly.
   PS: MVVM (Model-View- ViewModel), derived from classic Model-View-Controller (MVC) pattern. MVVM promote the emergence of a separate GUI front-end development and back-end business logic, greatly improved the efficiency of front-end development. MVVM ViewModel is the core layer, it is like a transfer station (value converter), is responsible for converting the data object in the Model to make data easier to manage and use, this layer up with a view of the two-way data binding layer, to under the Model layer exchanges data through the interface request from the action goes to start. View the data layer is not exhibited the Model layer, but ViewModel data from the ViewModel responsible for interacting with the Model layer, which completely decoupled the View layer and the Model layer, this decoupling is crucial, it is separated from the front and rear end the most important part of the embodiment of the program
   as shown below:
   

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);
});

After Vue2.0, especially the rain the river recommend you use axios instead of jQuery ajax, presumably so that axios into many people's eyes.
axios HTTP client is a browser-based Promise for nodejs and, in essence, is the packaging of the native XHR, but it is implemented version of Promise, in line with the latest ES specification, which itself has the following characteristics:

1. Create XMLHttpRequest from the browser
2. Support Promise API
3. Client Support CSRF
4. Interfaces are provided transmission request (important to facilitate the operation of many)
5. Create a http request from node.js
6. Intercept request and response
7. Conversion request and response data
8. Cancellation request
9. Automatically convert JSON data
   PS: prevent CSRF: is to make your every request with a get from the cookie key, depending on the browser same-origin policy, a fake website that you can not get a cookie was key, so that background can easily identify whether the request is misleading user input on the fake website in order to take the right strategy.

3.fetch

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

fetch the title is AJAX alternatives are appearing in ES6, ES6 objects using Promise in. Fetch is based on the promise of design. Fetch code much simpler mechanism than ajax, parameters a bit like jQuery ajax. However, we must remember not fetch the package further ajax, but native js, do not use the XMLHttpRequest object.
fetch advantages:

1. In line with separation of concerns, not the status of the input, output and events to track objects in a cluttered by
2. Better and more convenient wording
   Frankly, the above reason for me absolutely nothing convincing, because whether or jquery axios have helped us put xhr package is good enough, it is also easy enough to use, why should we take great efforts to learn fatch?
   I think the advantage is fatch:
3. Simple syntax, semantics more
4. Based on standard Promise, supporting async / await
5. Isomorphism convenient, the use [of Isomorphic-FETCH] ( https://github.com/matthew-andrews/isomorphic-fetch )
6. More bottom, providing a rich API (request, response)
7. From XHR, ES is the norm in new ways

Recently when using the fetch, and also encountered many problems:
fetch is a low-level API, you can take it into consideration native XHR, it is not so comfortable to use, the need for packaging.
E.g:

1. fetch only network requests being given to 400,500 are as successful request, the server returns an error code 400, 500, and will not reject, only the network error which led to a request can not be completed, fetch will be reject.
2. The default will not fetch with cookie, you need to add configuration items: fetch (url, {credentials: 'include'})
3. fetch is not supported 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, resulting in a flow of waste
4. fetch is no way to detect the original request progress, and can XHR

Summary: axios providing concurrent package, nor fetch the problems, and the volume is relatively small, well-deserved request it to be the embodiment of choice.