在微信小程序开发过程中，请求拦截器可以帮我们统一管理网络请求，减少重复代码，提升开发效率。但在实际配置使用时，很多开发者会不小心踩中一些常见错误，导致请求异常或者功能不符合预期。下面我们就来看看这5个常见错误以及如何避免。
错误一：拦截器注册时机不当
很多开发者会在页面onLoad生命周期中注册拦截器，这会导致页面多次加载时重复注册拦截器，出现请求被多次拦截的问题。正确的做法是在小程序启动时就注册拦截器，一般放在app.js的onLaunch生命周期中。
// app.js
App({
onLaunch() {
// 在小程序启动时注册请求拦截器，避免重复注册
this.initRequestInterceptor()
},
initRequestInterceptor() {
const originalRequest = wx.request
wx.request = function(options) {
// 拦截逻辑
console.log('请求拦截:', options.url)
return originalRequest(options)
}
}
})错误二：请求头设置不符合规范
部分开发者在拦截器中设置请求头时，直接覆盖原有的header字段，导致请求丢失必要的参数。正确的做法是先合并原有header和新增的header，再发起请求。
// 正确的请求头设置方式
wx.request = function(options) {
const newHeader = {
...options.header, // 保留原有请求头
'Authorization': 'Bearer ' + wx.getStorageSync('token'), // 新增鉴权头
'Content-Type': 'application/json'
}
options.header = newHeader
return originalRequest(options)
}错误三：错误处理遗漏导致异常请求无反馈
有些拦截器只处理请求发送前的逻辑，没有处理请求失败的情况，导致接口报错时用户没有任何提示。我们需要在拦截器中统一处理错误响应。
wx.request = function(options) {
const originalSuccess = options.success
const originalFail = options.fail
options.success = function(res) {
if (res.statusCode !== 200) {
// 统一处理错误状态码
wx.showToast({
title: '请求失败，请稍后重试',
icon: 'none'
})
}
originalSuccess && originalSuccess(res)
}
options.fail = function(err) {
wx.showToast({
title: '网络连接异常',
icon: 'none'
})
originalFail && originalFail(err)
}
return originalRequest(options)
}错误四：异步逻辑阻塞请求发送
如果拦截器中有获取token等异步操作，直接同步执行会导致请求还没拿到token就发出去了。我们需要用Promise处理异步逻辑，等待异步操作完成再发送请求。
wx.request = function(options) {
return new Promise((resolve, reject) => {
// 异步获取token
wx.getStorage({
key: 'token',
success(storageRes) {
options.header = {
...options.header,
'Authorization': 'Bearer ' + storageRes.data
}
resolve(originalRequest(options))
},
fail() {
resolve(originalRequest(options))
}
})
})
}错误五：重复拦截导致请求死循环
如果拦截器内部又调用了wx.request，比如刷新token后重新发起原请求，没有做判断的话会导致请求无限循环。我们需要给请求加标记，避免重复拦截。
let isRefreshing = false
let requestQueue = []
wx.request = function(options) {
// 标记是否为重试请求，避免重复拦截
if (options.isRetry) {
return originalRequest(options)
}
// 假设token过期返回401，需要刷新token
const originalSuccess = options.success
options.success = function(res) {
if (res.statusCode === 401 && !isRefreshing) {
isRefreshing = true
// 刷新token的逻辑
wx.request({
url: 'https://ipipp.com/refreshToken',
isRetry: true, // 标记这是刷新token的请求，不进入拦截逻辑
success(refreshRes) {
wx.setStorageSync('token', refreshRes.data.token)
isRefreshing = false
// 重新发起原请求
options.isRetry = true
wx.request(options)
}
})
} else {
originalSuccess && originalSuccess(res)
}
}
return originalRequest(options)
}以上就是微信小程序中配置请求拦截器时最常见的5个错误以及对应的规避方法，开发者在实际使用时可以对照检查，避免因为这些问题影响小程序的正常运行。