vue3 axios.interceptors

### Vue3 中 Axios 拦截器的用法 在 Vue3 项目中配置 Axios 并设置拦截器可以极大地提高开发效率和代码可维护性。通过创建 Axios 实例并为其添加请求和响应拦截器，可以在每次发送请求或接收响应时执行特定逻辑。 #### 创建 Axios 实例 为了更好地管理和扩展 HTTP 请求功能，在 `src/utils` 文件夹下新建名为 `http.js` 的文件来初始化 Axios： ```javascript // src/utils/http.js import axios from 'axios'; const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // api base_url timeout: 5000 // request timeout }); export default service; ``` 此部分代码设置了基础 URL 和超时时间，并导出了一个自定义的 Axios 实例[^1]。 #### 添加请求拦截器 接下来为这个实例添加请求拦截器以便于处理一些通用的任务，比如携带 token 或者显示加载动画等操作: ```javascript service.interceptors.request.use( config => { // 在发送请求之前做些什么 const token = localStorage.getItem('token'); if (token) { config.headers['Authorization'] = `Bearer ${token}`; } return config; }, error => { // 对请求错误做些什么 Promise.reject(error); } ); ``` 上述代码展示了如何向每个发出的请求头中自动加入认证令牌以及当遇到网络异常情况下的简单错误处理机制[^2]。 #### 响应拦截器 同样也可以注册响应拦截器用于统一管理 API 返回的数据格式化工作或是捕获全局性的服务端报错信息： ```javascript service.interceptors.response.use( response => { // 对响应数据做点什么 const res = response.data; // 如果返回的状态码不是2xx，则认为是有误发生 if (!response.status.toString().startsWith('2')) { Message({ message: res.message || 'Error', type: 'error' }); return Promise.reject(new Error(res.message || 'Error')); } else { return res; } }, error => { // 对响应错误做点什么 console.log(`err${error}`); // for debug let msg = ''; try { switch (error.response.status) { case 401: msg = '未授权'; break; case 403: msg = '拒绝访问'; break; case 404: msg = '请求地址出错'; break; case 500: msg = '服务器内部错误'; break; default: msg = error.response.statusText; } Message({ message: msg, type: 'error' }); return Promise.reject(msg); } catch (_) { Message({ message: '连接服务器失败', type: 'error' }); return Promise.reject('连接服务器失败'); } } ); ``` 这段脚本实现了对接收到的服务端反馈进行初步解析的功能，包括但不限于状态码判断、消息提示等功能。 #### 使用封装好的 Http 工具类 最后一步是在整个应用程序范围内使新构建的 Axios 实例生效。这可以通过修改入口文件 `main.js` 来完成： ```javascript // main.js import { createApp } from 'vue'; import App from './App.vue'; import http from './utils/http'; createApp(App).use(http).mount('#app'); ``` 现在所有的组件都可以方便地调用 `$http()` 方法来进行 AJAX 调用了[^3]。