1、fetch - Ajax的替代者
Fetch API 提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。
const options = { method: "POST", // 请求参数 headers: { "Content-Type": "application/json"}, // 设置请求头 body: JSON.stringify({name:'123'}), // 请求参数 credentials: "same-origin", // cookie设置 mode: "cors", // 跨域}fetch('http://www.xxx.com',options) .then(function(response) { return response.json(); }) .then(function(myJson) { console.log(myJson); // 响应数据 }) .catch(function(err){ console.log(err); // 异常处理 })
fetch的坑点
由于fetch是一个非常底层的API，它并没有被进行很多封装，还有许多问题需要处理：
- 不能直接传递JavaScript对象作为参数
- 需要自己判断返回值类型，并执行响应获取返回值的方法
- 获取返回值方法只能调用一次，不能多次调用
- 无法正常的捕获异常
- 老版浏览器不会默认携带cookie
- 不支持jsonp
2、axios
Axios，基于 Promise 的 HTTP 客户端，可以工作于浏览器中，也可以在 node.js 中使用。
功能
- 从浏览器中创建 XMLHttpRequest
- 从 node.js 中创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防止 XSRF 攻击
3、Ajax,jQuery ajax,axios和fetch的区别
Ajax
ajax自然不必说，最早出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。
Jquery Ajax
是jQuery框架中的发送后端请求技术，由于jQuery是基于原始的基础上做的封装，所以，jquery Ajax自然也是原始ajax的封装。
Fetch
fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，一定记住fetch不是ajax的进一步封装，而是原生js。Fetch函数就是原生js，没有使用XMLHttpRequest对象。
axios
axios不是原生JS的，需要进行安装，它不仅可以在客户端使用，也可以在nodejs端使用。Axios也可以在请求和响应阶段进行拦截。同样也是基于promise对象的。
