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

最新推荐文章于 2024-06-12 06:00:00 发布

前端之神

最新推荐文章于 2024-06-12 06:00:00 发布

阅读量371

点赞数

分类专栏：浏览器文章标签： javascript vue.js jquery es6 html5

本文链接：https://blog.csdn.net/qq_42941302/article/details/108421390

版权

浏览器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

简介

传统的请求方案是基于原生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的缺点：

$.ajax 的回调逻辑在内部，本身是针对 MVC 架构的开发模式而存在的，而不太符合现在更流行MVVM
基于原生的XHR对象开发，XHR本身的架构不清晰
如果为了使用 $.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 的特点：

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

**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);
});