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;
相关推荐
杨杨杨大侠12 小时前
实战案例:商品详情页数据聚合服务的技术实现
java·spring·github
杨杨杨大侠12 小时前
实战案例:保险理赔线上审核系统的技术实现
java·spring·github
华仔啊12 小时前
摸鱼神器!前端大佬私藏的 11 个 JS 神级 API,复制粘贴就能用,效率翻倍
前端·javascript
一枚前端小能手12 小时前
🔥 React Hooks又让我重新渲染了999次!这些坑你踩过几个?
前端
计算机毕设定制辅导-无忧学长12 小时前
MQTT 与 Java 框架集成:Spring Boot 实战(一)
java·网络·spring boot
念念不忘 必有回响12 小时前
js设计模式-状态模式
javascript·设计模式·状态模式
Nerd Nirvana12 小时前
C++编程——异步处理、事件驱动编程和策略模式
开发语言·c++·策略模式·嵌入式开发·事件驱动·异步处理
叫我阿柒啊12 小时前
从Java全栈到Vue3实战:一次真实面试的深度复盘
java·spring boot·微服务·vue3·响应式编程·前后端分离·restful api
我的写法有点潮12 小时前
Scss 的四种导入方式你都知道吗
前端·css
快乐非自愿12 小时前
掌握设计模式--模板方法模式
java·设计模式·模板方法模式