更新记录
1.0.4(2024-05-13)
下载此版本
fix: 重构本插件,重新实现了拦截器逻辑
1.0.3(2023-12-09)
下载此版本
fix: 新增一些使用示例,更新文档
1.0.2(2023-12-07)
下载此版本
fix: 优化拦截器逻辑,提升用户体验
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.94 |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
ux-request 封装请求
- 基于uts封装uni.request请求
- 带拦截器,支持多拦截器
- 支持uni-app x
使用注意事项
- 本插件支持Android、Web、Ios端
- ios端未测试,因为作者没有mac
- 因为官方的泛型只用于类型推断,无法作为值传递,所以封装本插件时,返回的数据均以UTSJSONObject方式操作,参考UTSJSONObject文档
- 如果有任何问题,可以在uni-im留言
插件通用配置
参数名 |
类型 |
默认值 |
备注 |
url |
string |
|
请求的完整链接 |
baseURL |
string |
|
请求域名 |
api |
string |
|
请求的api接口 |
method |
RequestMethod |
GET |
请求方法 |
data |
UTSJSONObject |
null |
null |
请求的数据 |
header |
UTSJSONObject |
{} |
请求的header |
使用方式
在项目根目录下创建common/request/index.uts配置拦截器,也可根据自己的项目自行配置
创建拦截器需要注意的是:
- 定义的拦截器须继承UxInterceptor基类
- 继承之后,须重写beforeRequest/afterResponseSucc/afterResponseFail三个方法
- 重写之后,在各个方法里面实现自己的拦截逻辑(如下示例)
方法名 |
备注 |
beforeRequest |
请求之前拦截 |
afterResponseSucc |
请求成功拦截 |
afterResponseFail |
请求失败拦截 |
// 当前common/request/index.uts
import UxRequest from '@/uni_modules/ux-request/js_sdk/request.uts'
import UxInterceptor from '@/uni_modules/ux-request/js_sdk/interceptors.uts'
import { UxParam, UxRequestOptions, UxResponseFail } from '@/uni_modules/ux-request/js_sdk/types.uts'
// 请求拦截器示例
class HttpInterceptor extends UxInterceptor {
constructor() {
super()
}
override beforeRequest(config : UxRequestOptions) : UxRequestOptions {
config.baseURL = 'http://127.0.0.1:8888' // 请填写自己的域名或者本机ip
config.url = config.baseURL + config.api
config.timeout = 50000
config.header['Content-Type'] = 'application/x-www-form-urlencoded'
return config
}
override afterResponseSucc(response : UTSJSONObject) : UTSJSONObject {
return response
}
override afterResponseFail(error : UxResponseFail) : UxResponseFail {
uni.showToast({
title: '错误码: ' + error.errCode + ', 错误信息: ' + error.errMsg,
icon: 'none'
})
return error
}
}
const ins = UxRequest.create()
ins.addInterceptor(new HttpInterceptor())
export default ins
多拦截器说明
本插件支持多拦截器,按照ins.addInterceptor添加的顺序执行
// 本插件支持多拦截器
import UxRequest from '@/uni_modules/ux-request/js_sdk/request.uts'
import UxInterceptor from '@/uni_modules/ux-request/js_sdk/interceptors.uts'
import { UxRequestOptions, UxResponseFail } from '@/uni_modules/ux-request/js_sdk/types.uts'
// 请求拦截器示例
class HttpInterceptor extends UxInterceptor {
constructor() {
super()
}
override beforeRequest(config : UxRequestOptions) : UxRequestOptions {
config.baseURL = 'http://127.0.0.1:8888' // 请填写自己的域名或者本机ip
config.url = config.baseURL + config.api
config.timeout = 50000
config.header['Content-Type'] = 'application/x-www-form-urlencoded'
return config
}
override afterResponseSucc(response : UTSJSONObject) : UTSJSONObject {
// 根据返回的数,在此处做请求状态处理
// ...
return response
}
override afterResponseFail(error : UxResponseFail) : UxResponseFail {
uni.showToast({
title: '错误码: ' + error.errCode + ', 错误信息: ' + error.errMsg,
icon: 'none'
})
return error
}
}
// 日志拦截器示例
class LogInterceptor extends UxInterceptor {
constructor() {
super()
}
override beforeRequest(config : UxRequestOptions) : UxRequestOptions {
console.log('请求前拦截器日志:', config)
return config
}
override afterResponseFail(error : UxResponseFail) : UxResponseFail {
console.log('请求失败拦截器日志:', error)
return error
}
}
const ins = UxRequest.create()
ins.addInterceptor(new HttpInterceptor())
ins.addInterceptor(new LogInterceptor())
export default ins
定义sevices
// 当前common/request/apis/app.uts
import ins from "../index.uts"
export const getList = (): Promise<UTSJSONObject> => {
return ins.getData('/project/list', null)
}
页面中使用
import { getList } from '@/common/request/apis/app.uts'
getList().then((res: UTSJSONObject) => {
console.log(res) // UTSJSONObject
})