uniapp请求拦截

<think>嗯，用户想知道怎么在UniApp里实现请求拦截功能。我之前了解过axios的拦截器，但UniApp可能不太一样，因为UniApp用的是自己的请求API，比如uni.request。所以首先得确认UniApp中是否有类似axios的拦截器机制。 查了一下，UniApp本身并没有内置的拦截器功能，但可以通过封装请求方法来模拟拦截器的效果。比如在每次发送请求前，先执行请求拦截器，处理配置项，比如添加token；在收到响应后，处理响应数据或错误，这就是响应拦截器。 用户提供的引用里提到了uni.request的配置和拦截器代码，比如引用[2]中的beforeRequest函数，返回一个Promise，处理config配置项，检查url和method是否正确，添加token到header。这可能就是请求拦截器的实现方式。另外，引用[3]展示了api.js的配置，可能需要结合这些接口配置来统一处理请求。 所以，步骤应该是：封装统一的请求函数，在请求前拦截处理config，比如添加token、验证参数；在响应后处理结果，比如统一处理错误码。同时，可能需要使用Promise来链式调用，确保拦截器处理后的配置传递给uni.request。 另外，用户可能希望代码示例详细，包括请求和响应拦截的具体实现，比如如何处理token、显示加载状态、错误提示等。还要注意UniApp的环境，比如使用uni.showToast来提示错误，而不是alert。 可能需要分步骤讲解：1. 创建请求工具文件，封装uni.request；2. 实现请求拦截器，处理配置；3. 实现响应拦截器，处理结果；4. 导出封装后的请求方法供其他模块使用。 同时，用户可能关心如何在不同接口中应用这些拦截器，比如引用[3]中的api配置，需要将拦截器与这些接口配置结合起来，确保每个请求都经过拦截处理。 最后，需要检查代码的正确性，比如是否正确返回Promise，是否正确处理配置项，是否有遗漏的参数检查，比如url是否为空，method是否正确。此外，错误处理是否全面，比如网络错误、服务器错误等，都需要在响应拦截器中处理。 可能还需要提到优化点，比如可以添加请求重试、缓存机制，或者结合Vuex管理token状态，但这些可能属于进阶内容，用户当前问题可能只需要基础实现。</think>### 在UniApp中实现请求拦截功能的完整教程 #### 一、实现思路 通过封装`uni.request`方法，在请求发出前通过**请求拦截器**统一处理配置参数（如添加Token、校验参数），响应返回后通过**响应拦截器**统一处理结果（如错误码解析、全局提示）。以下是分步骤实现： --- #### 二、代码实现 ##### 1. 创建`http.js`请求工具文件 ```javascript // http.js const BASE_URL = 'https://api.example.com' // 替换为实际接口地址 // 请求拦截器 const requestInterceptor = (config) => { return new Promise((resolve) => { // 1. 参数校验 if (!config.url) { uni.showToast({ title: '请求地址不能为空', icon: 'error' }) throw new Error('URL_REQUIRED') } // 2. 添加全局header config.header = config.header || {} const token = uni.getStorageSync('token') if (token) config.header.Authorization = `Bearer ${token}` // 3. 显示加载状态（可选） if (config.showLoading !== false) { uni.showLoading({ title: '加载中...', mask: true }) } resolve(config) }) } // 响应拦截器 const responseInterceptor = (response) => { // 关闭加载状态 uni.hideLoading() const { statusCode, data } = response if (statusCode === 200) { // 根据业务逻辑处理数据 if (data.code === 401) { uni.navigateTo({ url: '/pages/login/login' }) return Promise.reject('TOKEN_EXPIRED') } return data } else { return Promise.reject(response) } } // 封装请求方法 export const http = (options) => { return new Promise((resolve, reject) => { requestInterceptor(options) .then(config => { uni.request({ url: `${BASE_URL}${config.url}`, method: config.method || 'GET', data: config.data, header: config.header, success: (res) => { resolve(responseInterceptor(res)) }, fail: (err) => { uni.showToast({ title: '网络连接失败', icon: 'error' }) reject(err) } }) }) .catch(err => reject(err)) }) } ``` ##### 2. 配置接口管理文件`api.js` ```javascript // api.js import { http } from './http' export const api = { login: (data) => http({ url: '/auth/login', method: 'POST', data }), getUserInfo: () => http({ url: '/user/info', method: 'GET' }) } ``` ##### 3. 在页面中使用 ```javascript import { api } from '@/api/api' // 发起请求示例 api.login({ username: 'admin', password: '123456' }) .then(res => console.log('登录成功:', res)) .catch(err => console.error('请求失败:', err)) ``` --- #### 三、关键功能说明 1. **请求拦截器核心逻辑**： - 自动添加Token到Header[^2] - 统一参数校验（URL非空检测、Method合法性判断） - 全局加载状态控制（通过`showLoading`配置开关） 2. **响应拦截器核心逻辑**： - 401状态码自动跳转登录页[^3] - 网络错误统一提示 - 剥离业务数据（`response.data`） 3. **扩展配置项**： ```javascript http({ url: '/path', method: 'POST', data: { key: 'value' }, showLoading: false // 关闭当前请求的加载提示 }) ``` --- #### 四、优化建议 1. **添加重试机制**：针对网络波动自动重试请求 2. **请求缓存**：对GET请求增加缓存策略 3. **超时控制**：在`uni.request`中设置`timeout`参数 4. **Content-Type适配**：根据数据类型自动设置请求头