axios二次封装配置请求拦截器和响应拦截器

我们为什么要对axios进行二次封装?

因为我们可以使用请求拦截器在发送请求之前处理一些业务,使用响应拦截器在服务器数据返回后处理一些业务。

我们通常创建一个api文件夹,再创建一个request.js文件,用于存放重写后的axios。

javascript 复制代码
// 引入axios
import axios from "axios";

// 利用axios对象的create 方法去创建一个axios实例,我们可以对其进行配置
const requestObj = axios.create({
    // 基础路径:一般我们发送请求时都会出现api
    baseURL: "/api",
    // 请求超时的时间
    timeout: 5000
});

// 请求拦截器:在请求发送之前,请求拦截器检测到,也可以在请求发出去之前做一些事情
requestObj.interceptors.request.use((config) => {
    // config:配置对象,其中有headers请求头
    return config;
})

// 响应拦截器
// 有成功请求函数和失败回调函数
requestObj.interceptors.response.use((res) => {
    // 成功回调函数:直接返回请求的数据
    return res.data;
}, (error) => {
    // 失败回调函数:返回一个Promise对象
    return Promise.reject(new Error('faile'));
})

export default requestObj;
相关推荐
只愿云淡风清几秒前
ECharts地图数据压缩-ZigZag算法
前端·javascript·echarts
亿元程序员8 分钟前
都2025年了,还有面试问A*寻路的???
前端
Moment9 分钟前
Node.js v25.0.0 发布——性能、Web 标准与安全性全面升级 🚀🚀🚀
前端·javascript·后端
全职计算机毕业设计11 分钟前
基于微信小程序的运动康复中心预约系统的设计与实现(SpringBoot+Vue+Uniapp)
vue.js·spring boot·微信小程序
杨超越luckly13 分钟前
HTML应用指南:利用POST请求获取中国一汽红旗门店位置信息
前端·arcgis·html·数据可视化·门店数据
专注前端30年18 分钟前
【JavaScript】every 方法的详解与实战
开发语言·前端·javascript
速易达网络20 分钟前
Java Web登录系统实现(不使用开发工具)
java·开发语言·前端
IT_陈寒23 分钟前
Vite 3.0 性能优化实战:5个技巧让你的构建速度提升200% 🚀
前端·人工智能·后端
金士顿25 分钟前
EC-Engineer SDK 核心 API 使用指南
前端