Similarities and Differences asynchronous request xhr, axios and fetch the

XHR: XMLHttpResquest objects

advantage:

　　1. update the page without having to reload the page, the partial refresh

Disadvantages:

　　1. cumbersome to use, configure various parameters

　　2. Compatibility is not very good

jquery  ajax

Xhr of encapsulation, the process compatibility problems

advantage:

　　1. XHR primary package, made compatible with the process, simplify the use of

　　2. Added support for JSONP, you can simply cross-domain processing section

Disadvantages:

　　1. If a plurality of requests, and there is a dependency, easy to form local callback

　　2.ajax is a method of jquery, if only to be used to introduce the entire jquery ajax have to very unreasonable

axios: based on the promise of the HTTP library, you can use the browser and the node. XHR is the nature of the package, but is realized version of Promise, in line with the latest ES specification.

advantage:

　　1. You can use the browser and the node

　　2. Support Promise API

　　3. Client support defense CSFR

　　4. interception request and the corresponding

　　The request data and the corresponding data conversion

　　6. The automatic conversion data JSON

PS: prevent CSRF: it 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 you can easily back identify whether the request is misleading user input on the fake website in order to take the right strategy.

Disadvantages:

　　Only supports modern browsers

fetch: Fetch API provides a JavaScript interface for accessing and manipulating the HTTP pipeline section. Native js

advantage:

　　

1.  语法简洁，更加语义化
2.  基于标准 Promise 实现，支持 async/await
3. 同构方便，使用 [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch) 4.更加底层，提供的API丰富（request, response） 5.脱离了XHR，是ES规范里新的实现方式

Disadvantages:

1）fetch只对网络请求报错，对400，500都当做成功的请求，服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。
2）fetch默认不会带cookie，需要添加配置项： fetch(url, {credentials: 'include'}) 3）fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费 4）fetch没有办法原生监测请求的进度，而XHR可以

　　In the configuration, add a mode： 'no-cors' can of cross-domain

1. fetch('/users.json', {
2. method: 'post',
3. mode: 'no-cors',
4. data: {}
5. }).then(function() { /* handle response */ });