axios请求拦截器阻止请求

axios请求拦截器在发送请求之前会拦截请求，并可以对请求进行一些处理。在这个例子中，我们可以看到拦截器的配置在引用中的`http.interceptors.request.use`函数中完成。该函数接受一个参数`config`，代表当前要发送的请求的配置。在这个函数中，我们可以根据需要对请求进行一些逻辑判断。 首先，我们可以看到在这个拦截器中定义了一个数组`noLanJie`，它包含了一些不需要被拦截的请求地址。如果请求的地址在这个数组中存在，那么就直接放行，不做任何处理。 如果请求的地址不在`noLanJie`数组中，那么就是需要被拦截的请求。在这个例子中，拦截器会从本地存储中获取到一个名为`token`的值，并将它添加到请求的请求头中的`authorization`字段中。这样，在发送请求时，会将这个`token`作为身份验证信息携带到后端。最后，拦截器需要返回`config`对象，以便让请求继续发送。 总结起来，axios的请求拦截器可以在发送请求之前对请求进行一些处理，例如添加请求头信息等。拦截器可以根据请求的配置进行逻辑判断，决定是否拦截请求并进行处理。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [axios请求拦截器的配置](https://blog.csdn.net/qq_44603011/article/details/123121764)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vue axios登录请求拦截器](https://download.csdn.net/download/weixin_38655810/13194829)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [axios全局拦截+请求响应处理+路由拦截](https://blog.csdn.net/weixin_42484657/article/details/122365109)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

### 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响应的状态检测，在这种情况下它会触发一次异步操作去更新过期的身份验证令牌，并再次提交原始请求直到成功为止或达到最大次数限制。