axios拦截器

<think>好的，用户想知道如何在Axios中设置请求和响应拦截器。我需要先回忆Axios的相关知识，尤其是拦截器的使用方法。根据系统提供的引用内容，引用[2]和[3]提到了请求和响应拦截器的配置方法，以及它们的优先级。 首先，我应该解释拦截器的作用，比如请求拦截器可以修改配置，添加token；响应拦截器处理数据或错误。然后分步骤说明如何设置，包括全局拦截器和实例拦截器。可能需要提到use方法，传入两个函数处理成功和失败的情况。同时要提到配置的优先级，比如请求配置高于实例配置，再高于全局配置，这点引用[2]有提到。 还要注意语法正确，比如示例代码中的instance.interceptors.request.use的正确写法。用户可能需要代码示例，所以给出具体的例子，比如在请求拦截器中设置Authorization头，在响应拦截器中处理数据或错误。 另外，用户可能想了解实际应用场景，比如统一处理错误、登录失效判断，引用[3]提到响应拦截器常用来判断登录失效，这点可以强调。最后，生成相关问题，帮助用户深入理解，比如错误处理、拦截器执行顺序、取消请求等。 需要确保回答结构清晰，分步骤讲解，引用正确来源，并在末尾添加相关问题。还要用中文，避免使用Markdown，行内公式用$...$，独立公式用$$...$$，但这里可能用不上数学公式。检查是否有错误，比如配置的优先级是否正确，代码示例是否正确。确保引用标识正确对应，比如引用[2]和[3]对应的内容在回答中正确标注。</think>### 如何在Axios中设置请求和响应拦截器 Axios拦截器允许在请求发送前或响应返回后统一处理数据，常用于添加全局配置、错误处理、权限验证等场景。以下是具体实现步骤： --- #### 一、请求拦截器 **作用**：修改请求配置（如添加请求头、Token）、取消请求、日志记录等。 ```javascript // 全局请求拦截器 axios.interceptors.request.use( (config) => { // 修改请求配置，例如添加Token config.headers.Authorization = 'Bearer ' + localStorage.getItem('token'); return config; }, (error) => { // 处理请求错误 return Promise.reject(error); } ); // 实例的请求拦截器（优先级高于全局） const instance = axios.create(); instance.interceptors.request.use( (config) => { /* 实例级配置修改 */ return config; }, (error) => { return Promise.reject(error); } ); ``` --- #### 二、响应拦截器 **作用**：统一处理响应数据（如格式化结果）、捕捉错误（如登录失效）、重试请求等。 ```javascript // 全局响应拦截器 axios.interceptors.response.use( (response) => { // 对响应数据统一处理，例如提取核心字段 return response.data; }, (error) => { // 处理HTTP错误码，例如401跳转登录页 if (error.response.status === 401) { window.location.href = '/login'; } return Promise.reject(error); } ); // 实例的响应拦截器 instance.interceptors.response.use( (response) => { return response; }, (error) => { /* 实例级错误处理 */ } ); ``` --- #### 三、配置优先级说明 Axios的配置优先级为：**请求级配置 > 实例级配置 > 全局配置**。例如，若实例拦截器和全局拦截器同时存在，实例的拦截器会先执行[^2]。 --- #### 四、典型应用场景 1. **添加全局Token**：通过请求拦截器自动附加认证信息。 2. **错误统一处理**：响应拦截器中拦截HTTP错误码并提示用户[^3]。 3. **数据格式化**：提取后端返回数据的核心字段，减少重复代码。 ---