uniapp 如何封装request请求
封装request请求的方法
在UniApp中封装request请求可以提高代码复用性，便于统一处理错误和请求配置。以下是常见的封装方法：
基础封装示例
// utils/request.js
const baseURL = 'https://your-api-domain.com/api'
function request(options) {
return new Promise((resolve, reject) => {
uni.request({
url: baseURL + options.url,
method: options.method || 'GET',
data: options.data || {},
header: {
'Content-Type': 'application/json',
...options.header
},
success: (res) => {
if (res.statusCode === 200) {
resolve(res.data)
} else {
reject(res)
}
},
fail: (err) => {
reject(err)
}
})
})
}
export default request添加拦截器
// 请求拦截
function requestWithInterceptor(options) {
// 添加token等通用header
const token = uni.getStorageSync('token')
const headers = {
'Authorization': `Bearer ${token}`,
...options.header
}
return request({
...options,
header: headers
}).catch(err => {
// 统一错误处理
if (err.statusCode === 401) {
uni.navigateTo({ url: '/pages/login/login' })
}
return Promise.reject(err)
})
}使用示例
import request from '@/utils/request'
// GET请求
request({
url: '/user',
method: 'GET'
}).then(res => {
console.log(res)
})
// POST请求
request({
url: '/login',
method: 'POST',
data: {
username: 'admin',
password: '123456'
}
})高级封装建议
- 添加请求超时配置
- 实现请求取消功能
- 添加重试机制
- 区分开发和生产环境API地址
- 添加请求缓存策略
- 实现文件上传/download封装
这种封装方式可以保持代码整洁，统一管理API请求，便于后期维护和扩展。
