一、什么是接口全局守卫
在Uniapp开发中，接口全局守卫是一种拦截和处理所有网络请求/响应的机制。它允许我们在请求发出前和收到响应后统一处理逻辑，如添加公共参数、统一错误处理、登录态校验等。
二、为什么需要全局守卫
1. 减少重复代码：避免在每个请求中重复编写相同的逻辑
2. 统一管理：集中处理授权、错误等通用逻辑
3. 增强可维护性：修改公共逻辑只需改动一处
4. 提高开发效率：开发者只需关注业务参数
三、实现方案（基于uni.request）
方案1：封装基础请求方法
javascript
// utils/http.js
const baseURL = 'https://api.example.com'
export const http = (options) => {
return new Promise((resolve, reject) => {
// 请求拦截 - 添加公共参数/header
options.url = baseURL + options.url
// 添加token等认证信息
const token = uni.getStorageSync('token')
if (token) {
options.header = options.header || {}
options.header['Authorization'] = 'Bearer ' + token
}
// 发起实际请求
uni.request({
...options,
success: (res) => {
// 响应拦截 - 统一处理业务状态码
if (res.statusCode === 200) {
resolve(res.data)
} else if (res.statusCode === 401) {
// token过期处理
uni.navigateTo({ url: '/pages/login/login' })
reject(res)
} else {
reject(res)
}
},
fail: (err) => {
// 网络错误统一处理
uni.showToast({ title: '网络异常', icon: 'none' })
reject(err)
}
})
})
}
方案2：使用第三方库（如luch-request）
javascript
// utils/request.js
import Request from 'luch-request'
const http = new Request({
baseURL: 'https://api.example.com',
timeout: 30000,
})
// request拦截器
http.interceptors.request.use(
(config) => {
const token = uni.getStorageSync('token')
if(token){
config.header['Authorization'] = `Bearer ${token}`
}
return config
}, err => Promise.reject(err))
// response拦截器
http.interceptors.response.use(
(response) => {
if(response.data.code !==200){
return Promise.reject(response.data)
}
return response.data
}, error=>{
if(error.statusCode===401){
uni.navigateTo({url:'/pages/login/login'})
}
return Promise.reject(error)
})
export default http
四、使用方法示例
javascript
import http from '@/utils/http'
// GET示例
export function getList(params){
return http({
url:'/api/list',
method:'GET',
params
})}
// POST示例
export function submitData(data){
return http({
url:'/api/submit',
method:'POST',
data
})}
五、高级功能扩展
1.重试机制:可在失败时自动重试
javascript
function withRetry(fn, retries=3){
return fn().catch(err=>retries>0?withRetry(fn,retries-1):Promise.reject(err))
}
withRetry(()=>getList(params))
2.取消请求:使用AbortController
3.节流控制:防止频繁提交
4.缓存策略:对GET结果进行本地缓存
5.Mock支持:开发环境下切换mock数据源
六、注意事项
1.Token刷新问题需要考虑并发场景(推荐使用队列方式)
2.超时时间应根据不同API特点设置差异化值
3.FormData类型需要特殊header设置
4.H5端跨域问题需后端配合解决
5.App端注意证书校验问题
通过以上实现，我们建立了一个健壮的Uniapp网络请求体系，能够满足大多数项目的需求。根据项目复杂度可选择简单封装或引入更专业的库来完善功能。
文章点评