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;
相关推荐
code_Bo1 分钟前
前端使用snapdom报错问题
前端·javascript·vue.js
学习编程的Kitty1 分钟前
JavaEE初阶——多线程(1)初识线程与创建线程
java·开发语言·java-ee
勤奋菲菲13 分钟前
Egg.js 完全指南:企业级 Node.js 应用框架
开发语言·javascript·node.js
一壶浊酒..21 分钟前
什么是AJAX
前端·javascript·ajax
智能化咨询26 分钟前
基于Spring Boot + Vue 3的乡村振兴综合服务平台性能优化与扩展实践
vue.js·spring boot·性能优化
长安城没有风37 分钟前
从入门到精通【Redis】初识Redis哨兵机制(Sentinel)
java·数据库·redis·后端
蒂法就是我41 分钟前
java集合类的底层类是哪个
java·开发语言
fruge3651 小时前
从零到一:我在 Rokid Glasses 上“画”出一个远程协作系统
前端
BumBle1 小时前
高频扫码场景下的去重与接口调用方案
前端·javascript
Hoking1 小时前
LangChain4j集成SpringBoot接入百炼大模型(Qwen)
java·人工智能·spring boot·llm