axios的二次封装-Toy模板网

这篇具有很好参考价值的文章主要介绍了axios的二次封装。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1 axios是干什么的?

XMLHttpRequest、jq、fetch、axios都是用来向服务器端发送请求，并获得响应

2 为什么要进行二次封装axios？

为了封装请求拦截器，响应拦截器

请求拦截器：可以在发送请求之前可以处理一些业务

响应拦截器：当服务器数据返回以后，可以处理一些事情

在src下创建一个api文件夹，这里面放着我们项目中对一些api的请求

requests是我们对axios的二次封装

axios的二次封装

/* 对于axios进行二次封装 */
import axios from "axios"
//1:利用axios对象的方法create，去创建一个axios实例
//2:request就是axios，我们进行一下配置
const requests = axios.create({
    //配置对象
    //基础路径，发送请求的时候，路径当中会出现api
    baseURL:"/api",
    //配置请求超时时间
    timeout:2000,
    
});
//请求拦截器：再发请求指示之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
//interceptors拦截器
requests.interceptors.request.use((config)=>{
    //config:配置对象，对象里面有一个属性很重要，header请求头
    return config;
});
//响应拦截器
requests.interceptors.response.use((res)=>{
    //成功的回调函数：服务器响应数据回来以后，响应拦截器可以检测到，可以做一些事情
    return res.data;
},(error)=>{
    //响应失败的回调函数
    return Promise.reject(new Error('faile'));
}
)
//向外暴露
export default requests

经过上面的改写，requests就相当于axios，我们可以用requests来发送请求

例如，在api下的index.js中

在此文件中，我们对api进行统一的管理，可以将对某个api的请求封装为方法，当项目中的多个地方都需要访问该api时，就可以调用该方法，提高开发效率，也便于当api路径更改时，造成的维护困难文章来源地址https://www.toymoban.com/news/detail-411297.html

import requests from "./request";
export const req=()=>{
 //发请求
   return requests({
   //注意axios发请求返回的结果是Promise对象
        url:" ",//这里是我们要访问的api接口
        method:'get'//注意该接口应该采用的访问方法，get还是post
    })
}

到了这里，关于axios的二次封装的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！