AJAX、Fetch和Axios的区别简述

摘要

前端技术真的是一个发展非常飞快地领域，现在只知道原生的XHR和Jquery AJAX是不能满足开发的需求的，现在axios和fetch已经开始抢占“请求”这个前端高地了，今天就给阐述一下他们之间的简要区别。

1、Jquery ajax

基本语法：

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

这个基本熟悉前端的都知道，是对原生XHR的封装，除此以外还增添了对JSONP的支持。其实，Jquery ajax经过多年的更新维护，真的已经非常的方便了，有点无需多言；如果是硬要举出几个缺点，那可能只有：
· 本身是针对MVC的编程，不符合现在前端的MVVM的浪潮
· 基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
· Jquery整个项目太大， 单纯使用ajax却要引入整个Jquery非常的不合理（采取个性化打包的方案又不能享受CDN服务）

尽管Jquery对我们前端的开发工作曾有着深远的影响，但是我们看到随着VUE，REACT新一代框架的兴起，以及ES规范的完善，更多API的更新，Jquery这种大而全的JS库，未来的路会越走越窄。

2、Axios

基本语法：

axios({
     method: "POST",
     url: "url,
     data: {
          key1: "value2",
          key2: "value2"
     }
})
.then(function(response) {
    console.log(response);
})
.catch(function(error){
     console.log(error)
})

Vue2.0之后，尤雨溪推荐大家用axios替换Jquery ajax和它本身的请求vue-resuorce，想必让Axios进入到了很多人的目光中,Axios本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，从它的官网可以看到它有以下几条特性：
· 从node.js创建http请求
· 支持Promise API
` 客户端支持防止CSRF
· 提供了一些并发请求的接口

Axios即提供了并发的封装，也没有下面会提到的fetch的各种问题，而且体积也是非常小，当之无愧现在最应该选的请求方式。

3、Fetch

fetch号称是AJAX的替代品，他的好有以下几点：
· 符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
· 更好更方便的写法，诸如：

try(
let response = await fetch(url);
let data = response.json();
console.log(data);
)catch(e){
console.log(“Oops, error”, e);
}
不管是Jquery还是Axios都已经帮我们把xhr封装的足够好，使用起来也足够的方便，为什么我们还要发费大力气去学习fetch？

· 我认为fetch的优势主要就是（request， response）
· 脱离了XHR，是ES规范里新的实现方式

但是fetch是一个低层次的API，你可以把它考虑成原生的XHR，所以使用起来并不是那么舒服，需要进行封装

例如：
1）fetch只对网络请求报错，对400，500都当作成功的请求，需要进行封装处理
2）fetch默认不会带cookie,需要添加配置项
3）fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费
4）fetch没有办法原生监测请求的进度，而XHR可以
虽然他有诸多的问题，但是他有一项是XHR怎么也比不了的能力：跨域问题，

我们都知道因为同源策略的问题，浏览器的请求是可能随便跨域的——一定要有跨域头或者借助JSONP，但是，fetch中可以设置mode为"no-cors"（不跨域），如下所示：

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

这样之后我们会得到一个type为“opaque”的返回。需要指出的是，这个请求是真正抵达过后台的，所以我们可以使用这种方法来进行信息上报，在我们之前的image.src方法中多出了一种选择，另外，我们在network中可以看到这个请求后台设置跨域头之后的实际返回，有助于我们提前调试接口（当然，通过chrome插件我们也可以做的到）。

总结

ajax是最早出现发送后端请求的技术，属于原生js范畴,核心是使用XMLHttpRequest对象,使用较多并有先后顺序的话，容易产生回调地狱。

fetch号称可以代替ajax的技术，是基于es6中的Promise对象设计的，参数和jQuery中的ajax类似，它并不是对ajax进一步封装，它属于原生js范畴。没有使用XMLHttpRequest对象。

axios不是原生js,使用时需要对其进行安装，客户端和服务器端都可以使用，可以在请求和相应阶段进行拦截，基于promise对象。