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;
相关推荐
Python×CATIA工业智造7 分钟前
Frida RPC高级应用:动态模拟执行Android so文件实战指南
开发语言·python·pycharm
pianmian137 分钟前
类(JavaBean类)和对象
java
我叫小白菜1 小时前
【Java_EE】单例模式、阻塞队列、线程池、定时器
java·开发语言
狐凄1 小时前
Python实例题:基于 Python 的简单聊天机器人
开发语言·python
Albert Edison2 小时前
【最新版】IntelliJ IDEA 2025 创建 SpringBoot 项目
java·spring boot·intellij-idea
daols882 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
超级小忍2 小时前
JVM 中的垃圾回收算法及垃圾回收器详解
java·jvm
weixin_446122462 小时前
JAVA内存区域划分
java·开发语言·redis
小小小小宇2 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊2 小时前
Python之--基本知识
开发语言·前端·python