更新记录

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的参数还有其他属性。

参数:

  1. retryTimes:整数类型。代表一次失败之后,最多自动重试retryTimes次,默认值是3。
  2. retryWaitTime:整数类型,代表每次自动重试之前等待的毫秒数。默认值是200。
  3. autoLoading:boolean类型,代表请求期间是否自动显示loading,默认值是true。
  4. manualRetryContent:string类型。如果设置了manualRetryContent的值,则在retryTimes次自动重试都失败后,会显示重试对话框,然后对话框中显示manualRetryContent的内容。对话框中有【取消】、【重试】两个按钮,如果用户点击了【重试】按钮之后,会再自动最大重试retryTimes次。

注意事项:由于这个组件可能多次重试后端接口,所有后端的接口需要是幂等的,也就是调用一次和调用N次的效果应该是一样的。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问