在Uniapp开发中，接口全局守卫是一种拦截和处理所有HTTP请求的机制。它允许你在请求发出前和响应返回后统一处理逻辑，非常适合实现以下功能：
- 自动添加认证token
- 统一错误处理
- 请求日志记录
- 加载状态管理
- API权限控制
二、实现基础拦截器
Uniapp通常使用`uni.request`进行网络请求，我们可以通过封装来实现全局守卫：
javascript
// utils/http.js
const http = {
// 保存原始request方法
_originalRequest: uni.request,
// 自定义request方法
request(options) {
// 请求前处理
console.log('请求发出:', options.url)
// token处理示例
if (!options.header) options.header = {}
const token = uni.getStorageSync('token')
if (token) options.header.Authorization = `Bearer ${token}`
// loading状态示例
if (options.showLoading !== false) {
uni.showLoading({ title: '加载中...' })
}
return new Promise((resolve, reject) => {
this._originalRequest({
...options,
success: (res) => {
// response拦截处理
if (res.statusCode === 200 && res.data.code === '200') {
resolve(res.data)
} else {
this._handleError(res)
reject(res)
}
},
fail: (err) => {
this._handleError(err)
reject(err)
},
complete: () => {
uni.hideLoading()
}
})
})
},
_handleError(error){
console.error('请求错误:', error);
let message = '网络错误'
if(error.statusCode){
switch(error.statusCode){
case401:
message='登录已过期'
break;
case404:
message='资源不存在'
break;
case500:
message='服务器错误'
break;
}
}
uni.showToast({ title:message, icon:'none' })
}
}
//替换原生的uni.request方法
uni.request= http.request.bind(http)
export default http
三、高级配置选项
1. 白名单配置：某些接口不需要添加token
javascript
const whiteList=['/api/login','/api/register']
function checkWhiteList(url){ return whiteList.some(item=>url.includes(item)) }
//在request方法中添加判断：if(!checkWhiteList(options.url)){//添加token逻辑}
2. 重试机制：当token过期时自动刷新并重试
javascript
async function refreshTokenAndRetry(originalOptions){ const newToken=await getNewToken() originalOptions.header.Authorization=`Bearer${newToken}` returnhttp._originalRequest(originalOptions)}
3. 取消重复请求：防止用户快速点击造成的重复提交
javascript
const pendingRequests=new Map()
function addPendingRequest(config){ const key=`${config.method}-${config.url}` config.cancelToken=config.cancelToken||newCancelToken(c=>{ if(!pendingRequests.has(key)){ pendingRequests.set(key,c)} })}
function removePendingRequest(config){ const key=`${config.method}-${config.url}` if(pendingRequests.has(key)){ pendingRequests.delete(key)}}
四、实际应用场景示例
1.权限控制
javascript
//检查是否有权限访问该API functioncheckPermission(url){ constpermissions=getCurrentUserPermissions() returnpermissions.some(p=>url.includes(p.apiPath))}
//在request拦截器中添加：if(!checkPermission(options.url)){returnPromise.reject(newError('无访问权限'))}
2.数据加解密
javascript
//加密函数 functionencryptData(data){ /*加密逻辑*/ }
//解密函数 functiondecryptData(data){ /*解密逻辑*/ }
//在发送前加密敏感数据 options.data=encryptData(options.data)
//在响应后解密数据 res.data=decryptData(res.data)
3.性能监控
javascript letstartTime=newDate().getTime()
options.startTime=startTime
complete:(res)=>{ constendTime=newDate().getTime() reportApiPerformance({ url:options.url, duration:endTime-startTime })}
4.Mock数据支持
if(process.env.NODE_ENV==='development'){
if(options.mock){
returnPromise.resolve(mock[options.mock])
}}
5.多环境适配
letbaseURL=''
switch(process.env.NODE_ENV){
case'development': baseURL='
文章点评