以配置的方式开关axios拦截器功能

最新推荐文章于 2025-05-29 10:17:42 发布

卡列尼娜翠花

最新推荐文章于 2025-05-29 10:17:42 发布

阅读量927

点赞数

分类专栏： Axios 文章标签： axios 拦截器 typescript 消息提示前端

本文链接：https://blog.youkuaiyun.com/qq_43220213/article/details/134194239

版权

本文介绍了如何在typescript中封装axios，通过扩展config类型并控制特定请求的拦截器启用状态。详细阐述了背景需求，扩展config类型以添加额外配置项，并在请求和响应拦截器中处理这些配置，以实现对响应反馈等拦截器功能的开关控制。通过示例展示了如何在实际请求中应用这些配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前景提要：
ts 简易封装 axios，统一 API

背景

axios 很多额外功能都是基于拦截器实现。有些功能想要全局使用，因此将拦截器注册在全局。比如重复请求过滤。但也有一小部分请求不希望进行过滤，比如并发上传文件。

因此希望可以在具体的请求方法上，通过配置 config 从而决定针对当前请求，某个拦截器是否启用。

默认不写配置项或者标为 true，都是开启。
明确指定配置项为 false，才是关闭。

注意：在具体方法上配置时，没有明确配置为 true 时，可能没有开启功能。因为在实例化时的 config 对象上，可能将该功能设为 false 了。整个 axios 实例上关闭了该功能，则此时具体方法上必须明确设为 true 覆盖掉实例化的配置才能启用。

以当前请求是否开启响应反馈为例：

// index.ts

import HttpRequest from "./http/request";

// 实例化 axios
const httpRequest = new HttpRequest({
   
    baseURL: import.meta.env.VITE_APP_API_BASE_URL,
    timeout: import.meta.env.VITE_APP_API_TIMEOUT,
    // 开启响应反馈拦截器功能（注册拦截器后，默认就是开启）
    showMessage: true 
});

// 在该 axios 实例上注册请求响应反馈拦截器
httpRequest.getInstance().interceptors.response.use(responseMessageOnFulfilled, null);

// 默认开启当前请求的请求响应弹窗反馈
async function handleMessageOpen() {
   
    const res = await httpRequest.get({
   
        url: "/mock/test"
    });
    console.log("res", res);
}

// 手动关闭当前请求的响应反馈
async function handleMessageClose(

最低0.47元/天解锁文章