本篇内容介绍了“如何取消正在运行的Promise”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
项目当中有很多业务,我们用一些简单代码复现下这个问题。
import React, { useEffect } from 'react'; import { history } from 'umi'; const Test = props => { useEffect(() => { new Promise((resolve, reject) => { // 模拟接口请求时间 setTimeout(() => { resolve() }, 4000); }).then(res => { return new Promise((resolve1) => { // 模拟接口请求时间 setTimeout(() => { resolve1() }, 1000); }) }).then(() => { // Promise 执行完后页面跳转 history.push('/test1') }) }, []); const go = () => { history.push('/user/login') } return ( <div> <button onClick={go}>go to</button> Test </div> ); } export default Test;
我们进入Test组件后,马上点击go to按钮,几秒之后页面还会跳转到test1页面。
经分析,我们应该在离开的时候要取消请求和取消Promise让后续的业务代码不在执行,取消请求比较简单,一般的库都支持,我们来说下怎么取消Promise.
我们知道Promise是没有提供取消或者终止的操作。但我们在开发过程中会遇到。我们可以参考和借助AbortController来实现。
class CancelablePromise<T> { /** * 构造器 * @param executor Promise中的 executor * @param abortSignal AbortController中的signal对象 * @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; // 创建和执行Promise const cancelablePromise = new Promise<T>((resolve, reject) => { _reject = reject; _resolve = (value: T) => { _isExecResolve = true; resolve(value); }; return executor(_resolve, reject); }); // 监听Signal的abourt事件 abortSignal.addEventListener('abort', () => { if (_isExecResolve) { return; } // 抛出错误 const error = new DOMException('user cancel promise', CancelablePromise.CancelExceptionName ); _reject( error ); } ); return cancelablePromise; } // 取消后抛出的异常名称 static CancelExceptionName = 'CancelablePromise AbortError'; } export default CancelablePromise;
下面我们该造下之前的代码,用我们封装的CancelablePromise,可以让Promise可取消。
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) => { // 模拟接口请求时间 setTimeout(() => { resolve() }, 4000); }, abortController.signal).then(res => { return new CancelablePromise((resolve1) => { // 模拟接口请求时间 setTimeout(() => { resolve1() }, 1000); }, abortController.signal) }).then(() => { // Promise 执行完后页面跳转 history.push('/test1') }) return () => { // 取消请求 abortController.abort(); } }, []); const go = () => { history.push('/user/login') } return ( <div> <button onClick={go}>go to</button> Test </div> ); } export default Test;
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) { // 取消之后会抛出异常 if (CancelablePromise.CancelExceptionName === error.name) { console.log('promise 终止了。。。') } } } exec(); return () => { // 取消请求 abortController.abort(); } }, []); }
Promise取消之后会抛出异常,如果需要在抛出异常之后做处理,可以通关对应的异常名称做判断。
if (CancelablePromise.CancelExceptionName === error.name) { console.log('promise 终止了。。。') }
“如何取消正在运行的Promise”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。