vue3 拦截依赖包发出请求

### 在 Vue3 中拦截来自依赖包的 HTTP 请求

为了实现对依赖包发出的 HTTP 请求进行拦截，在 Vue3 项目中可以采用多种方法。一种常见的方式是对 Axios 进行封装，创建自定义实例来统一管理请求和响应拦截器。

#### 使用 Axios 实现请求与响应拦截

通过配置 Axios 的 `interceptors` 属性可以在每次发起请求前以及接收到响应后执行特定逻辑：

import axios from 'axios';

const instance = axios.create({
    baseURL: process.env.VUE_APP_API_URL,
});

// 添加请求拦截器
instance.interceptors.request.use(
    config => {
        // 可在此处修改即将发送出去的config对象, 如添加token验证等操作
        const token = localStorage.getItem('authToken');
        if (token) {
            config.headers.Authorization = `Bearer ${token}`;
        }
        return config;
    },
    error => Promise.reject(error)
);

// 添加响应拦截器
instance.interceptors.response.use(
    response => response.data, // 对于成功的响应可以直接返回data部分给业务层调用者
    error => {
        // 处理失败情况下的异常信息
        console.warn(`Request failed with status code ${error?.response?.status}`);
        return Promise.reject(error);
    }
);

export default instance;

此代码片段展示了如何设置全局性的请求头（比如认证令牌），同时也提供了处理不同状态码的能力[^1]。

当其他模块或组件需要发起网络请求时，应该始终使用这个经过增强后的 Axios 实例而不是直接导入原始版本。这样就能确保所有的请求都会经过预先设定好的拦截流程。

对于那些并非由自己编写的第三方库所触发的请求，则可能还需要考虑这些库是如何集成到应用程序中的。如果它们也允许传入自定义的 HTTP 客户端作为参数之一的话，那么就可以尝试传递上面提到的那个带有拦截功能的新版 Axios 给对方使用；否则就只能寻找是否有办法覆盖默认行为或是监听某些事件来进行干预了。

另外值得注意的是，虽然 Fetch API 是原生支持 ES6+ 特性并且语法更加简洁的选择，但是它并不具备内置的支持中间件机制的功能，因此在这种场景下还是推荐优先选用 Axios 来完成任务[^3]。