1.0.2 • Published 12 months ago
@hctech/uni-request v1.0.2
TODO
- 通过传入config实现配置请求,不用写一大堆代码
- 每次请求可以自动带上一些数据,比如极智报销里的
user_id
- 乐观更新功能, 先响应界面后请求,出现问题再提示
- 控制是否显示loading
- 是否显示错误提示
- 断开网络了会直接提示
- 超出请求时间会关闭请求或加载
介绍
在原先的uniapp开发中,为了提供更友好的交互,通常需要写频繁loading和toast提示用户,现在只需要一行代码即可完成这些功能:http.setOptions().get('/v2/invoice/list', data)
,是否显示loading和toast,现在只需要在setOptions()
传入指定参数控制即可。
以前调试的时候经常需要进入network中查看传入参数和返回参数,现在可以直接将请求的关键信息打印到控制台。
- 网络检测:断网状态显示:![asset/Pasted image 20230521173542.png]
- loading - 可以开启关闭请求等待接口相应的loading![asset/Pasted image 20230521141618.png] - 同时也可以方便的定义
- 详细打印请求信息,绿色表示状态为200,红色表示非200 - ![asset/Pasted image 20230521141422.png] - 另外还有成功和失败的提示,基于200和非200![asset/Pasted image 20230521181658.png]![asset/Pasted image 20230521181731.png] - -
功能
配置
config
baseUrl:请求的基础地址 defaultParams:每次请求携带的默认参数 。。。
const http = new useApi({
loadingText:'加载中~~~~~' // 配置加载中的文字显示
});
const testGet = () => http.setOptions().get('/v2/invoice/list', { a: '111' })
testGet()
![asset/Pasted image 20230521182051.png]
单个请求配置
/**
* This function sets the options for a request.
*
* @param {Object} options The options for the request.
* @param {string} options.sucMsg The success message.
* @param {string} options.failMsg The failure message.
* @param {boolean} options.isShowLoading Flag to show/hide loading.
* @param {boolean} options.isShowSucToast Flag to show/hide success toast.
* @param {boolean} options.isShowErrToast Flag to show/hide error toast.
* @param {boolean} options.isOptimisticUpdateEnabled Flag for enabling optimistic update.
* @param {Object} options.header The header for the request.
* @param {boolean} options.isDebug Flag for enabling/disabling debug.
* @param {boolean} options.isWarn Poup a model.
* @return {useAxios} The useAxios instance.
*/
const http = new useApi();
const testGet = () => http.setOptions({isShowLoading:false}).get('/v2/invoice/list', { a: '111' })
testGet()
乐观更新
setOptions({isOptimisticUpdateEnabled:true})
, 默认false, 用户无感知操作,关闭加载中和成功通知,如果操作失败提醒用户重试:![asset/Pasted image 20230521182616.png]
弹窗警告
删除这样的重要操作,需要重点提示用户,防止用户误操作 其中一种使用弹框让用户确认,点击确认之后才会执行请求:![asset/Pasted image 20230520205925.png]
使用示例:
.setOptions({isWarn:true})
实战教程
async request() {
const http = new useApi({
loadingText:'加载中~~~~~',
});
const testGet = () => http.setOptions({isWarn:true}).get('/v2/invoice/list', { a: '111' })
testGet()
}