前端数据请求方案：$.ajax、axios 和 fetch

简介

传统的请求方案是基于原生js的 XMLHttpReauest（XHR） 对象的，众所周知，ajax 可以实现无刷新请求数据，它的出现使前端的技术上升了一个台阶。但是随着技术的革新，XHR 对象的弊端也渐渐的暴露出来，直到现在，我们进行前后端数据请求的主流方式大体有三种：$.ajax、axios 和 fetch。

jQuery 中的 $.ajax

jQuery 是曾经风靡一时的 js 库，作为一个相对完善的方法库，里边自然有对前后端数据请求的封装方法—— $.ajax 。

$.ajax 的用法如下，这里列出几个常用的参数

$.ajax({
    // 请求方式
    type:'GET',
    // URL字符串
    url:url,
    // 发送到服务器的数据。将自动转换为请求字符串格式。
    data:data,
    // 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断
    dataType:dataType,
    // 成功回调
    success:function(){},
    // 失败回调
    error:function(){}
})

jQuery 中的 $.ajax 是基于原生 XHR 对象的相对完善的封装版本，使用起来非常便捷。但是目前来看也有一些不足的地方，比如：

$.ajax的缺点：

1. $.ajax 的回调逻辑在内部，本身是针对 MVC 架构的开发模式而存在的，而不太符合现在更流行MVVM
2. 基于原生的XHR对象开发，XHR本身的架构不清晰
3. 如果为了使用 $.ajax 这一个方法而引入整个jQuery的话，会使项目太臃肿

axios

在Vue2.x出现之后，在项目中使用 axios 已经成为主流。axios 的本质也是对原生 XHR 对象的封装，但是它更优越的地方是用 Promise 实现，符合最新的 ES 规范。

axios({
    method:'post',
    url:'/xxx/xxx',
    data:data
}).then((response)=>{
    console.log(response)
}).catch((err)=>{
    console.log(err)
})

axios 的特点：

1. 支持 Promise
2. 从 node.js 中创建 http 请求
3. 客户端支持防止 CSRF
4. 自身提供的方法可以对 axios 进行二次封装，拦截请求和响应
5. 提供了并发请求的接口

**axios 的自主封装、配置拦截器 **

• axios.create()

  创建一个自定义的 axios 实例

• axios.interceptors.request.use()

  请求拦截， axios.interceptors.request.use() 方法用于定义在发送HTTP请求之前要运行的代码。

• axios.interceptors.response.use()

  响应拦截， axios.interceptors.response.use() 方法用于定义在接收HTTP响应之前要运行的代码。

// 创建一个自定义的 axios 实例
const myAxios = axios.create({
    // 请求超时时间
    timeout:3000
    // ... ...
})



// 请求拦截
myAxios.interceptors.request.use( config => {
    console.log('请求已发送');
    // 可以在此处打开loading，优化用户体验
    
    return config;
})



// 响应拦截
myAxios.interceptors.response.use( config => {
    if(config.status == 200){
        // 响应成功，在此处关闭loading
        
        // 过滤响应数据
        return config.data;
    }
},(err)=>{
    // 请求失败时抛出异常
    return Promise.reject(err);
})

fetch

fetch 在 ES6 中问世，是基于了 Promise 设计的。fetch 用起来有点像 $.ajax ，但是底层天差地别。fetch 基于原生js，没有使用 XHR 对象。

const url = 'http://localhost/test.htm';
const options = {
    method: 'POST',
    headers: {
       'Accept': 'application/json',
       'Content-Type': 'application/json;charset=UTF-8'
    },
    //需手动转换为字符串
    body: JSON.stringify(bodyObj)
};

fetch(url, options)
.then(response => {
    console.log(response);
});

fetch 的优点：

1. 比原生 XHR 对象的请求语法更简洁
2. 基于 Promise 实现，所以支持 async/await
3. 脱离了 XHR 对象，原理更加底层，提供的API更丰富

axios 和 fetch 的不同

1. 发送数据时， axios 使用 data 属性， fetch 使用 body 属性
2. 使用 fetch 时，需手动将数据进行 JSON.stringify()
3. 在 axios 中，url 在 options 对象中设置，在 fetch 中，url 作为第一个参数传入
4. axios 封装的更完善，fetch 更底层，使用起来没有那么舒服

总结

$.ajax 只在 jQuery 项目中使用

fetch 更底层，对标的是 XHR 对象，拥有很大的优化，但是并没有太完美的封装

axios 体积小，功能完善，而且封装了并发请求

能用 axios 就用 axios