如何取消正在运行的Promise

本篇内容介绍了“如何取消正在运行的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.

CancelablePromise (取消Promise)

我们知道Promise是没有提供取消或者终止的操作。但我们在开发过程中会遇到。我们可以参考和借助AbortController来实现。

class CancelablePromise<T> {    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可取消。

多个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;

在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) {        // 取消之后会抛出异常        if (CancelablePromise.CancelExceptionName === error.name) {          console.log('promise 终止了。。。')        }      }    }    exec();    return () => {        // 取消请求        abortController.abort();    }  }, []);}

Promise取消之后会抛出异常，如果需要在抛出异常之后做处理，可以通关对应的异常名称做判断。

if (CancelablePromise.CancelExceptionName === error.name) {  console.log('promise 终止了。。。')}

“如何取消正在运行的Promise”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！