axios请求拦截器和响应拦截器

### Axios 请求拦截器使用方法 #### 创建 Axios 实例并设置默认配置 为了更好地管理和定制 HTTP 请求，通常会先创建一个 Axios 实例，并为其设定一些通用的选项，比如基础 URL 或者超时时间等。 ```javascript import axios from 'axios'; const instance = axios.create({ baseURL: 'https://api.example.com', timeout: 1000, }); ``` #### 添加请求拦截器 请求拦截器允许在实际发起网络请求之前修改请求配置。这可以用来添加认证令牌、调整请求参数或是执行其他预处理逻辑。 ```javascript instance.interceptors.request.use( function(config) { // 在发送请求之前做一些事情 const token = localStorage.getItem('authToken'); if (token) { config.headers['Authorization'] = `Bearer ${token}`; } return config; }, function(error) { // 处理请求错误 return Promise.reject(error); } )[^5]; ``` 上述代码展示了如何利用请求拦截器向每个请求自动附加授权头部信息。如果本地存储中有有效的身份验证令牌，则将其加入到请求头中以便服务器端识别用户身份[^3]。 #### 错误重试机制 除了简单的前置处理外，还可以实现更复杂的业务需求，例如当遇到特定类型的失败（如未登录状态码）时尝试重新获取新的访问凭证后再重发请求： ```javascript let isRefreshing = false; instance.interceptors.response.use(undefined, async function (error) { const originalRequest = error.config; if ( error.response.status === 401 && !originalRequest._retry ) { if (!isRefreshing) { isRefreshing = true; try { await refreshAccessToken(); // 自定义函数用于刷新access_token originalRequest.headers['Authorization'] = 'Bearer ' + getNewAccessToken(); isRefreshing = false; return instance(originalRequest); } catch (_error) { isRefreshing = false; throw _error; } } originalRequest._retry = true; return new Promise((resolve, reject) => { setTimeout(() => { resolve(instance(originalRequest)); }, 500); }); } return Promise.reject(error); })[^1]; ``` 这段脚本实现了对于HTTP 401 Unauthorized响应的状态检测，在这种情况下它会触发一次异步操作去更新过期的身份验证令牌，并再次提交原始请求直到成功为止或达到最大次数限制。