Vue超详细讲解重试机制示例

function fetch(){
	return new Promise((resolve,reject) => {
		// 请求会在1秒后失败
		setTimeout(()=>{
			reject('err')
		},1000)
	})
}

// 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函数加载资源
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)
				})
			// 省略部分代码
		}
	}
}