Vue超详细讲解重试机制示例
作者:loyd3 时间:2024-04-30 08:45:37
重试指的是当加载出错时,有能力重新发起加载组件的请求。
异步组件加载失败后的重试机制,与请求服务端接口失败后的重试机制一样。所以,先来讨论接口请求失败后的重试机制是如何实现的, 为此,需要封装一个fetch函数,用来模拟接口请求:
function fetch(){
return new Promise((resolve,reject) => {
// 请求会在1秒后失败
setTimeout(()=>{
reject('err')
},1000)
})
}
为了实现失败后的重试,需要封装一个load函数,如下面代码所示:
// load函数接收一个onError回调函数
function load(onError){
// 请求接口,得到Promise实例
const p = fetch()
// 捕获错误
return p.catch(err=>{
// 当错误发生时,返回一个新的Promise实例,并调用onError回调
// 同时将retry函数作为onError回调的参数
return new Promise((resolve,reject)=>{
// retry函数,用来执行重试的函数,执行该函数会重新调用load函数并发送请求
const retry = () => resolve(load(onError))
const fail = () => reject(err)
onError(retry, fail)
})
})
}
load函数内部调用fetch函数来发送请求,并得到一个Promise实例,并把该实例的resolve
和reject方法暴露给用户,让用户来决定下一步应该怎么做。这里,将新的Promise实例的resolve和reject分别封装为retry函数和fail函数,并将它们作为onError回调函数的参数。
这样,用户就可以在错误发生时主动选择重试或直接抛出错误。
下面的代码展示了用户时如何进行重试加载的:
// 调用load函数加载资源
load(
// onError回调
(retry) => {
// 失败后重试
retry()
}
).then(res=>{
// 成功
console.log(res)
})
基于这个原理,就可以很容易地将其整合到异步组件的加载流程中,具体实现如下:
function defineAsyncComponent(options){
if(typeof options === 'function'){
options = {
loader: options
}
}
const {loader} = options
let InnerComp = null
// 记录重试次数
let retries = 0
// 封装load函数用来加载异步组件
function load(){
return loader()
.catch((err)=>{
// 如果用户指定了onError回调,则将控制权交给用户
if(options.onError){
return new Promise((resolve,reject) => {
// 重试
const retry = () => {
resolve(load())
retries++
}
// 失败
const fail = () => reject(err)
// 作为onError回调函数的参数,让用户来决定下一步怎么做
options.onError(retry, fail, retries)
})
}else{
throw error
}
}
}
return {
name: 'AsyncComponentWrapper',
setup(){
const loaded = ref(false)
const error = shallowRef(null)
const loading = ref(false)
let loadingTimer = null
if(options.delay){
loadingTimer = setTimeout(()=>{
loading.value = true
}, options.delay);
}else{
loading.value = true
}
// 调用load函数加载组件
load()
.then(c=>{
InnerComp = c
loaded.value = true
})
.catch((err)=>{
err.value = err
})
.finally(()=>{
loading.value = false
clearTimeout(loadingTimer)
})
// 省略部分代码
}
}
}
来源:https://blog.csdn.net/loyd3/article/details/127787998
标签:Vue,重试,机制


猜你喜欢
Django 删除upload_to文件的步骤
2022-03-23 05:47:14

六行python代码的爱心曲线详解
2022-04-09 23:15:17

在pycharm中实现删除bookmark
2021-03-18 07:57:24

微软建议的ASP性能优化28条守则(3)
2008-02-24 16:30:00
Python自动创建Excel并获取内容
2023-12-31 01:42:07

详解Vue中使用v-for语句抛出错误的解决方案
2024-04-09 10:44:34
为什么在MySQL中不建议使用UTF-8
2024-01-25 17:53:29
Python使用matplotlib实现交换式图形显示功能示例
2023-04-25 06:10:49

python selenium参数详解和实现案例
2023-09-25 01:20:29

如何更改Pycharm配置文件的存放路径
2023-12-29 03:11:06

Python学习之yaml文件的读取详解
2023-04-20 14:06:42

python中提高pip install速度
2023-12-20 09:32:14
pycharm下打开、执行并调试scrapy爬虫程序的方法
2022-08-07 09:30:52

Flask框架之数据交互的实现
2023-01-25 05:41:10

Python第三方库xlrd/xlwt的安装与读写Excel表格
2023-12-16 22:52:34
Python Pygame实现兔子猎人守护城堡游戏
2021-09-21 11:09:59

SQL截取字符串函数分享
2024-01-23 23:09:59
golang分层测试之http接口测试入门教程
2024-05-25 15:12:00
一文讲清base64编码原理
2023-04-10 23:51:48
详解Python 3D引擎Ursina如何绘制立体图形
2021-11-17 06:04:20
