Axios请求拦截与响应拦截配置

### 如何在 Axios 中实现请求和响应拦截 #### 创建 Axios 实例并配置基础 URL 和其他选项 为了更好地管理和定制 HTTP 请求，通常会创建一个 Axios 的实例，并为其指定一些全局配置项。 ```javascript // 引入 axios 库 import axios from 'axios'; const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 设置默认的基础URL timeout: 5000 // 超时时间设置为5秒 }); ``` #### 添加请求拦截器 通过 `service.interceptors.request.use()` 方法可以注册一个函数，在每次发起请求之前执行该函数。这允许修改即将发送出去的请求参数或添加必要的头部信息等操作。 ```javascript service.interceptors.request.use( config => { // 可在此处加入身份验证token或其他公共头文件 if (store.getters.token) { config.headers['Authorization'] = 'Bearer ' + store.getters.token; } return config; // 返回配置对象继续下一步流程 }, error => Promise.reject(error) ); ``` #### 添加响应拦截器 同样地，`service.interceptors.response.use()` 用于监听所有的HTTP响应数据。可以在接收到服务器返回的数据之后做一些预处理工作，比如统一处理错误码、显示加载动画结束等等。 ```javascript service.interceptors.response.use( response => response.data, // 如果状态码是2xx，则直接返回response中的data部分 error => { console.log('err' + error); // 对于网络错误打印日志 let message = ''; switch (error.response.status) { case 401: message = "未授权"; break; case 403: message = "拒绝访问"; break; case 404: message = "请求地址出错"; break; default: message = "连接到服务器失败"; } Message.error(message); return Promise.reject(error); }); ``` 以上代码片段展示了如何利用 Axios 提供的功能来增强应用程序发出的每一个 AJAX 请求的安全性和用户体验[^1]。