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;
相关推荐
你的人类朋友15 小时前
什么是API签名?
前端·后端·安全
会豪17 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子17 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶17 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子17 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
架构师沉默17 小时前
设计多租户 SaaS 系统,如何做到数据隔离 & 资源配额?
java·后端·架构
遂心_17 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark17 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
小徐_233317 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin17 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js