Vue超詳細講解重試機制示例

更新時間：2023年01月05日 15:18:07 作者：loyd3

這篇文章主要介紹了Vue重試機制示例，重試指的是當加載出錯時，有能力重新發(fā)起加載組件的請求。異步組件加載失敗后的重試機制，與請求服務(wù)端接口失敗后的重試機制一樣

重試指的是當加載出錯時，有能力重新發(fā)起加載組件的請求。

異步組件加載失敗后的重試機制，與請求服務(wù)端接口失敗后的重試機制一樣。所以，先來討論接口請求失敗后的重試機制是如何實現(xiàn)的，為此，需要封裝一個fetch函數(shù)，用來模擬接口請求：

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

為了實現(xiàn)失敗后的重試，需要封裝一個load函數(shù)，如下面代碼所示：

// load函數(shù)接收一個onError回調(diào)函數(shù)
function load(onError){
	// 請求接口，得到Promise實例
	const p = fetch()
	// 捕獲錯誤
	return p.catch(err=>{
		// 當錯誤發(fā)生時，返回一個新的Promise實例，并調(diào)用onError回調(diào)
		// 同時將retry函數(shù)作為onError回調(diào)的參數(shù)
		return new Promise((resolve,reject)=>{
			// retry函數(shù)，用來執(zhí)行重試的函數(shù)，執(zhí)行該函數(shù)會重新調(diào)用load函數(shù)并發(fā)送請求
			const retry = () => resolve(load(onError))
			const fail = () => reject(err)
			onError(retry, fail)
		})
	})
}

load函數(shù)內(nèi)部調(diào)用fetch函數(shù)來發(fā)送請求，并得到一個Promise實例，并把該實例的resolve

和reject方法暴露給用戶，讓用戶來決定下一步應(yīng)該怎么做。這里，將新的Promise實例的resolve和reject分別封裝為retry函數(shù)和fail函數(shù)，并將它們作為onError回調(diào)函數(shù)的參數(shù)。

這樣，用戶就可以在錯誤發(fā)生時主動選擇重試或直接拋出錯誤。

下面的代碼展示了用戶時如何進行重試加載的：

// 調(diào)用load函數(shù)加載資源
load(
	// onError回調(diào)
	（retry） => {
		// 失敗后重試
		retry()
	}
).then(res=>{
	// 成功
	console.log(res)
})

基于這個原理，就可以很容易地將其整合到異步組件的加載流程中，具體實現(xiàn)如下：

function defineAsyncComponent(options){
	if(typeof options === 'function'){
		options = {
			loader: options
		}
	}
	const {loader} = options
	let InnerComp = null
	// 記錄重試次數(shù)
	let retries = 0
	// 封裝load函數(shù)用來加載異步組件
	function load(){
		return loader()
				.catch((err)=>{
					// 如果用戶指定了onError回調(diào)，則將控制權(quán)交給用戶
					if(options.onError){
						return new Promise((resolve,reject) => {
							// 重試
							const retry = () => {
								resolve(load())
								retries++
							}
							// 失敗
							const fail = () => reject(err)
							// 作為onError回調(diào)函數(shù)的參數(shù)，讓用戶來決定下一步怎么做
							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
			}
			// 調(diào)用load函數(shù)加載組件
			load()
				.then(c=>{
					InnerComp = c
					loaded.value = true
				})
				.catch((err)=>{
					err.value = err
				})
				.finally(()=>{
					loading.value = false
					clearTimeout(loadingTimer)
				})
			// 省略部分代碼
		}
	}
}

到此這篇關(guān)于Vue超詳細講解重試機制示例的文章就介紹到這了,更多相關(guān)Vue重試機制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: