uniapp+vue3 axios中配置拦截器

<think>好的，我需要帮助用户了解在UniApp和Vue3项目中如何为Axios配置请求和响应拦截器。首先，我得回顾一下用户提供的引用内容，看看里面有没有相关的步骤或代码示例。 根据引用[1]，用户提到在UniApp的Vue3版本中需要安装特定版本的Axios，比如0.26.0以下。所以第一步应该是安装正确版本的Axios。然后引用[2]和[3]都提到了请求和响应拦截器的配置，以及Pinia的使用，但用户主要关注拦截器部分。 接下来，我需要整理配置拦截器的步骤。通常，在Axios中配置拦截器需要创建一个实例，然后使用instance.interceptors.request.use和instance.interceptors.response.use来添加拦截逻辑。同时，用户可能需要在请求拦截器中处理令牌，比如添加Authorization头，而在响应拦截器中处理错误，比如令牌过期后的刷新。 需要注意的是，UniApp的环境可能和普通Web环境有些不同，比如网络请求可能需要使用uni.request，但用户选择使用Axios，所以可能需要做一些适配。不过根据引用[1]中的示例，用户已经成功在UniApp中使用Axios，所以应该没问题。 另外，引用[3]提到在Vue3中使用Pinia进行状态管理，可能涉及到存储令牌，但用户的问题主要是拦截器的配置，这部分可能不需要深入讨论，除非和拦截器有直接关联，比如在拦截器中读取Pinia存储的令牌。 然后，我需要确保代码示例正确，特别是语法部分，比如使用箭头函数、正确处理config对象、返回config或Promise.reject等。同时，要提醒用户注意Axios版本的问题，避免因版本不兼容导致的问题。 最后，生成的相关问题需要围绕配置拦截器的扩展知识，比如令牌刷新、错误处理优化、与Pinia的结合使用，以及UniApp中的注意事项。这些问题应该能帮助用户进一步深入理解相关知识。</think>### UniApp Vue3 中配置 Axios 拦截器分步指南 #### 一、环境准备 1. 安装指定版本 axios： ```bash npm install [email protected] # 必须使用该版本保证兼容性[^1] ``` #### 二、创建 Axios 实例 在 `/utils/http.js` 文件中： ```javascript import axios from 'axios' const instance = axios.create({ baseURL: 'https://your-api-domain.com', timeout: 10000 }) ``` #### 三、配置请求拦截器 ```javascript instance.interceptors.request.use( (config) => { // 从存储中获取 token（示例使用uni存储） const token = uni.getStorageSync('token') if (token) { config.headers.Authorization = `Bearer ${token}` // 自动添加认证头 } return config }, (error) => { return Promise.reject(error) } ) ``` #### 四、配置响应拦截器 ```javascript instance.interceptors.response.use( (response) => { if (response.data.code === 401) { // 处理令牌过期情况 return refreshToken().then(() => { return instance(response.config) // 重新发起原始请求 }) } return response.data // 过滤axios包装层 }, (error) => { if (error.response.status === 401) { // 统一处理认证失败 uni.navigateTo({ url: '/pages/login' }) } return Promise.reject(error) } ) ``` #### 五、封装无感刷新令牌 ```javascript let isRefreshing = false let requests = [] function refreshToken() { if (isRefreshing) return isRefreshing = true return axios.post('/refresh_token').then(res => { uni.setStorageSync('token', res.data.token) requests.forEach(cb => cb()) requests = [] }).finally(() => { isRefreshing = false }) } ``` #### 六、在组件中使用 ```javascript import http from '@/utils/http' http.get('/user/profile').then(res => { console.log('响应数据:', res) }) ``` #### 关键注意点： 1. 跨平台兼容性：UniApp 中使用 `uni.setStorageSync` 替代 localStorage 2. 错误边界：拦截器中必须返回 Promise.reject 保证错误传递 3. 并发控制：刷新令牌时通过队列管理等待中的请求[^3]