更新记录
1.0.0(2021-02-24) 下载此版本
2021-02-24 发布
平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
app-vue app-nvue | √ | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
在网络信号不强等情况下,网络请求可能会失败,因此我开发了一个能自动对失败的请求进行重试的组件zackRetrier,如果N次重试都失败了,还会弹出对话框问用户“是否再次重试”。在请求处理期间会自动显示loading提示。
用法:
首先引入组件
import {zRetrier} from "@/js_sdk/yz-zackRetrier/zackRetrier/index.js";
调用发送网络请求:
zRetrier({url:"https://api.youzack.com/test"})
zRetrier函数返回的是Promise对象,所以既可以用await的方式获取调用结果,也可以使用then()方式。返回值是一个长度为2的数组,数组的第一个元素是错误对象,如果调用成功了,则第一个元素是null,数组的第二个元素是服务器端返回的响应。
示例代码1
zRetrier({url:"https://api.youzack.com/test",manualRetryContent:"登录失败,是否重试"})
.then(res=>{
let err = res[0];
let resp = res[1];
if(err)
{
uni.showModal({
content:"调用失败"+err.errMsg
});
return;
}
uni.showModal({
content:"调用成功"+resp
});
});
示例代码2:
let err1,resp1;
[err1,resp1] = await zRetrier({url:"https://api.youzack.com/test",manualRetryContent:"登录失败,是否重试"});
if(err1)
{
uni.showModal({
content:"调用失败"+err1.errMsg
});
return;
}
uni.showModal({
content:"调用成功"+resp1
});
zRetrier函数只有一个参数,这个参数会完整的传递给内部封装的uni.request方法,所以如果想设定method、headers等,用法和uni.request一样。除此之外,zRetrier的参数还有其他属性。
参数:
- retryTimes:整数类型。代表一次失败之后,最多自动重试retryTimes次,默认值是3。
- retryWaitTime:整数类型,代表每次自动重试之前等待的毫秒数。默认值是200。
- autoLoading:boolean类型,代表请求期间是否自动显示loading,默认值是true。
- manualRetryContent:string类型。如果设置了manualRetryContent的值,则在retryTimes次自动重试都失败后,会显示重试对话框,然后对话框中显示manualRetryContent的内容。对话框中有【取消】、【重试】两个按钮,如果用户点击了【重试】按钮之后,会再自动最大重试retryTimes次。
注意事项:由于这个组件可能多次重试后端接口,所有后端的接口需要是幂等的,也就是调用一次和调用N次的效果应该是一样的。