取消正在運(yùn)行的Promise技巧詳解
更新時(shí)間：2022年06月08日 15:29:02 作者：杰出D
這篇文章主要為大家介紹了取消正在運(yùn)行的Promise技巧詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
前言
最近項(xiàng)目當(dāng)中小伙伴遇到一個(gè)很奇怪的bug，進(jìn)入一個(gè)頁(yè)面后，快速切換到其它頁(yè)面，會(huì)跳轉(zhuǎn)到403頁(yè)面。經(jīng)過(guò)一段時(shí)間和小伙伴的排查，發(fā)現(xiàn)那個(gè)頁(yè)面有個(gè)接口請(qǐng)求響應(yīng)時(shí)間比較長(zhǎng)，請(qǐng)求后還有一些業(yè)務(wù)處理。
等我們切換到其它頁(yè)面，這個(gè)請(qǐng)求完成后還會(huì)處理剩下的業(yè)務(wù)，導(dǎo)致出錯(cuò)。
代碼案例
項(xiàng)目當(dāng)中有很多業(yè)務(wù)，我們用一些簡(jiǎn)單代碼復(fù)現(xiàn)下這個(gè)問(wèn)題。
import React, { useEffect } from 'react';
import { history } from 'umi';
const Test = props => {
useEffect(() => {
new Promise((resolve, reject) => {
// 模擬接口請(qǐng)求時(shí)間
setTimeout(() => {
resolve()
}, 4000);
}).then(res => {
return new Promise((resolve1) => {
// 模擬接口請(qǐng)求時(shí)間
setTimeout(() => {
resolve1()
}, 1000);
})
}).then(() => {
// Promise 執(zhí)行完后頁(yè)面跳轉(zhuǎn)
history.push('/test1')
})
}, []);
const go = () => {
history.push('/user/login')
}
return (
<div>
<button onClick={go}>go to</button>
Test
</div>
);
}
export default Test;
我們進(jìn)入Test組件后，馬上點(diǎn)擊go to按鈕，幾秒之后頁(yè)面還會(huì)跳轉(zhuǎn)到test1頁(yè)面。
經(jīng)分析，我們應(yīng)該在離開(kāi)的時(shí)候要取消請(qǐng)求和取消Promise讓后續(xù)的業(yè)務(wù)代碼不在執(zhí)行，取消請(qǐng)求比較簡(jiǎn)單，一般的庫(kù)都支持，我們來(lái)說(shuō)下怎么取消Promise.
CancelablePromise (取消Promise)
我們知道Promise是沒(méi)有提供取消或者終止的操作。但我們?cè)陂_(kāi)發(fā)過(guò)程中會(huì)遇到。我們可以參考和借助AbortController來(lái)實(shí)現(xiàn)。
class CancelablePromise<T> {
/**
* 構(gòu)造器
* @param executor Promise中的 executor
* @param abortSignal AbortController中的signal對(duì)象
* @returns
*/
constructor(executor: (resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void, abortSignal: AbortSignal) {
// 記錄reject和resolve方法
let _reject: any = null;
let _resolve: any = null;
let _isExecResolve = false;
// 創(chuàng)建和執(zhí)行Promise
const cancelablePromise = new Promise<T>((resolve, reject) => {
_reject = reject;
_resolve = (value: T) => {
_isExecResolve = true;
resolve(value);
};
return executor(_resolve, reject);
});
// 監(jiān)聽(tīng)Signal的abourt事件
abortSignal.addEventListener('abort', () => {
if (_isExecResolve) {
return;
}
// 拋出錯(cuò)誤
const error = new DOMException('user cancel promise', CancelablePromise.CancelExceptionName );
_reject( error );
} );
return cancelablePromise;
}
// 取消后拋出的異常名稱
static CancelExceptionName = 'CancelablePromise AbortError';
}
export default CancelablePromise;
使用
下面我們?cè)撛煜轮暗拇a，用我們封裝的CancelablePromise,可以讓Promise可取消。
多個(gè)Promise鏈?zhǔn)秸{(diào)用
import React, { useEffect } from 'react';
import { history } from 'umi';
import CancelablePromise from '../utils/CancelablePromise';
const Test = props => {
useEffect(() => {
let abortController = new AbortController();
new CancelablePromise((resolve, reject) => {
// 模擬接口請(qǐng)求時(shí)間
setTimeout(() => {
resolve()
}, 4000);
}, abortController.signal).then(res => {
return new CancelablePromise((resolve1) => {
// 模擬接口請(qǐng)求時(shí)間
setTimeout(() => {
resolve1()
}, 1000);
}, abortController.signal)
}).then(() => {
// Promise 執(zhí)行完后頁(yè)面跳轉(zhuǎn)
history.push('/test1')
})
return () => {
// 取消請(qǐng)求
abortController.abort();
}
}, []);
const go = () => {
history.push('/user/login')
}
return (
<div>
<button onClick={go}>go to</button>
Test
</div>
);
}
export default Test;
在async和await中使用
import React, { useEffect } from 'react';
import { history } from 'umi';
import CancelablePromise from '../utils/CancelablePromise';
const Test = props => {
useEffect(() => {
let abortController = new AbortController();
const exec = async function () {
try {
await new CancelablePromise((resolve) => {
setTimeout(() => {resolve();}, 5000);
}, abortController.signal, 'one')
await new CancelablePromise((resolve1) => {
setTimeout(() => {resolve1();}, 5000);
}, abortController.signal, 'del')
history.push('/test')
} catch (error) {
// 取消之后會(huì)拋出異常
if (CancelablePromise.CancelExceptionName === error.name) {
console.log('promise 終止了。。。')
}
}
}
exec();
return () => {
// 取消請(qǐng)求
abortController.abort();
}
}, []);
}
Promise取消之后會(huì)拋出異常，如果需要在拋出異常之后做處理，可以通關(guān)對(duì)應(yīng)的異常名稱做判斷。
if (CancelablePromise.CancelExceptionName === error.name) {
console.log('promise 終止了。。。')
}
結(jié)束語(yǔ)
Promise的取消在業(yè)務(wù)當(dāng)中用到的地方比較多，更多關(guān)于Promise運(yùn)行取消的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了react?中?mobx的使用案例詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
所謂的生命周期就是指某個(gè)事物從開(kāi)始到結(jié)束的各個(gè)階段,本文主要介紹了淺談react新舊生命周期鉤子,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
在React項(xiàng)目中引入國(guó)際化可以使用第三方庫(kù)來(lái)實(shí)現(xiàn)，本文主要介紹了react項(xiàng)目中如何引入國(guó)際化，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
React實(shí)現(xiàn)導(dǎo)入導(dǎo)出Excel文件
本文主要介紹了React實(shí)現(xiàn)導(dǎo)入導(dǎo)出Excel文件，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07
關(guān)于React動(dòng)態(tài)修改元素樣式的三種方式
這篇文章主要介紹了關(guān)于React動(dòng)態(tài)修改元素樣式的三種方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要給大家介紹了關(guān)于React Native自定義組件與輸出方法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
探討JWT身份校驗(yàn)與React-router無(wú)縫集成
這篇文章主要為大家介紹了JWT身份校驗(yàn)與React-router無(wú)縫集成的探討解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
react實(shí)現(xiàn)todolist的增刪改查詳解
這篇文章主要為大家介紹了react實(shí)現(xiàn)todolist的增刪改查，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
react中的useContext具體實(shí)現(xiàn)
useContext是React提供的一個(gè)鉤子函數(shù),用于在函數(shù)組件中訪問(wèn)和使用Context,useContext的實(shí)現(xiàn)原理涉及React內(nèi)部的機(jī)制,本文給大家介紹react中的useContext具體實(shí)現(xiàn),感興趣的朋友一起看看吧2023-11-11
這篇文章主要介紹了react-native封裝插件swiper的使用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03