uni.addInterceptor拦截request

### 如何使用 `uni.addInterceptor` 拦截 `request` 请求 在 UniApp 开发中，`uni.addInterceptor` 方法允许开发者拦截特定的 API 调用并对其进行预处理或后处理。通过该方法可以方便地实现全局请求参数拼接、错误捕获以及响应数据的统一处理等功能。 以下是关于如何使用 `uni.addInterceptor` 来拦截 `request` 请求的具体说明和示例： #### 1. 基本语法 `uni.addInterceptor(type, interceptor)` 的两个参数分别为： - **type**: 需要拦截的目标类型字符串，例如 `'request'` 或 `'navigateTo'`。 - **interceptor**: 对象形式，包含多个回调函数来分别处理不同阶段的操作[^2]。 #### 2. 实现代码示例 下面展示了一个完整的 `uni.addInterceptor` 截获 `request` 请求的例子，其中包括 URL 自动补全、状态码校验等操作。 ```javascript // 添加 request 拦截器 uni.addInterceptor('request', { // 在发送请求之前执行的动作 invoke(args) { // 动态设置基础路径或其他公共配置项 args.url = 'https://example-api.com/' + args.url; // 可选：添加 token 到 header 中（假设已存在 globalToken） const globalToken = uni.getStorageSync('token'); if (globalToken) { args.header = { ...args.header || {}, Authorization: `Bearer ${globalToken}` }; } }, // 当请求成功返回时调用此方法 success(response) { // 如果服务端返回的状态码不是预期值，则抛出自定义异常 if (response.statusCode !== 200) { throw new Error(`Request failed with status code ${response.statusCode}`); } return response; // 返回原始的数据给上层业务逻辑继续解析 }, // 处理失败情况下的行为 fail(error) { console.error('Request error:', error); return Promise.reject(error); // 把错误传递到外部 catch 函数里去进一步处理 }, // 不管成功还是失败都会进入 complete 回调 complete(result) { console.log('Request completed:', result); } }); ``` 上述脚本实现了如下功能： - 给所有的接口地址加上固定的域名前缀； - 若本地存储中有有效的认证令牌则附加至 headers 字段下传输给服务器验证身份合法性； - 根据 HTTP 状态码判断是否真正意义上的成功完成了一次通信过程，并针对不符合条件的情况给出提示信息或者采取其他措施加以应对。 #### 3. 测试封装后的效果 一旦设置了以上拦截机制之后，在任何地方发起网络请求都将自动应用这些规则而无需重复书写相同片段的内容。比如这样简单的一句就可以获取远程资源列表了： ```javascript uni.request({ url: '/items', method: 'GET' }).then((data) => { console.log('Items fetched successfully:', data); }).catch((error) => { console.error('Failed to fetch items:', error.message); }); ``` 此时即使没有显式指定完整URL也不会有问题因为已经由前面定义好的invoke环节帮我们补充好了必要的部分；另外如果遇到权限不足等问题也能第一时间察觉出来从而快速定位原因所在[^4]。 --- ###