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

简介

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

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

你可能感兴趣的:(前端数据请求方案:$.ajax、axios 和 fetch)