异步请求xhr、axios及fetch的异同

XHR： XMLHttpResquest对象

优点：

　　1.不重新加载页面的情况下更新网页，局部刷新

缺点：

　　1.使用起来比较繁琐，需要配置各种参数

　　2.兼容性不太好

jquery  ajax

对xhr的封装，处理了兼容性问题

优点：

　　1.对原生XHR的封装，做了兼容处理，简化了使用

　　2.增加了对JSONP的支持，可以简单处理部分跨域

缺点：

　　1.如果多个请求，并且有依赖关系，容易形成回调地域

　　2.ajax是jquery中的一个方法，如果只是要使用ajax却要引入整个jquery非常不合理

axios：基于promise的HTTP库，可以在浏览器和node中使用。本质也是对XHR的封装，只不过是Promise的实现版本，符合最新的ES规范。

优点：

　　1.可以在浏览器及node中使用

　　2.支持Promise API

　　3.客户端支持防御CSFR

　　4.拦截请求和相应

　　5.转换请求数据和相应数据

　　6.自动转换JSON数据

PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。

缺点：

　　只支持现代浏览器

fetch：Fetch API 提供了一个JavaScript接口，用于访问和操作HTTP管道的部分。原生js

优点：

　　

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

缺点：

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可以

　　在配置中，添加mode： 'no-cors'就可以跨域了

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