取消正在运行的Promise技巧详解

2024-04-02 19:04:59 840人浏览八月长安

摘要

目录前言代码案例CancelablePromise (取消Promise)使用多个Promise链式调用在async和await中使用结束语前言最近项目当中小伙伴遇到一个很奇怪的b

前言

最近项目当中小伙伴遇到一个很奇怪的bug，进入一个页面后，快速切换到其它页面，会跳转到403页面。经过一段时间和小伙伴的排查，发现那个页面有个接口请求响应时间比较长，请求后还有一些业务处理。

等我们切换到其它页面，这个请求完成后还会处理剩下的业务，导致出错。

代码案例

项目当中有很多业务，我们用一些简单代码复现下这个问题。

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的取消在业务当中用到的地方比较多，更多关于Promise运行取消的资料请关注编程网其它相关文章！

--结束END--

本文标题: 取消正在运行的Promise技巧详解

本文链接: https://lsjlt.com/news/150887.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

猜你喜欢

取消正在运行的Promise技巧详解

目录前言代码案例CancelablePromise (取消Promise)使用多个Promise链式调用在async和await中使用结束语前言最近项目当中小伙伴遇到一个很奇怪的b...

99+

2024-04-02
如何取消正在运行的Promise

本篇内容介绍了“如何取消正在运行的Promise”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！代码案例项目当中有很多业务，我们用一些简单代码...

99+

2023-07-02
Win8系统程序运行不正常提示联机检查解决方案的取消技巧

　　我们在使用Windows 8系统的时候，偶尔会遇到某些程序不能正常运行，系统提示需要联机检查解决方案。很多用户对这个提示感到厌烦，下面教大家如何通过修改注册表来取消这个提示。　　操作步骤　　1.按&...

99+

2022-06-04

不正常解决方案提示
MySQL如何查看正在运行的SQL详解

目录前言processlistthreadsevents_statements_current如何查看正在运行的SQL拿到正在执行的processlist_id拿到与processlist_id对应的thread_id拿...

99+

2023-01-12

mysql查询正在运行的sql mysql执行sql 查看mysql当前正在执行的命令
在Android中获取正在运行的Service 实例

public class ServiceList extends Activity { @Override protected void onCreate(Bundle s...

99+

2022-06-06

service 运行 Android
android如何获取正在运行的应用

可以使用ActivityManager类来获取正在运行的应用。以下是一个示例代码：```javaimport android.app...

99+

2023-09-26

android
Python 异步之如何获取当前和正在运行任务详解

目录正文1. 如何获取当前任务2. 如何获取所有任务正文我们可以反省在 asyncio 事件循环中运行的任务。这可以通过为当前运行的任务和所有正在运行的任务获取一个 asynci...

99+

2023-03-22

Python 异步获取当前运行任务 Python 异步
使用Golang进行除法运算时的取整技巧

Golang除法运算中的取整技巧，需要具体代码示例在编程中，除法运算经常会遇到取整的需求。Golang作为一门功能强大的编程语言，提供了多种方法来实现除法取整的操作。本文将介绍Golang中几种常用的取整技...

99+

2024-01-29

Golang 取整除法
Java -jar参数详解：掌握Java可执行JAR文件的运行技巧

作为一种常用的开发语言，Java经常使用可执行的JAR（Java Archive）文件来打包和分发应用程序。使用java -jar命令运行JAR文件是一种方便快捷的方式。本文将详细介绍java -jar命令的各种参数，帮助您充分利用这个功能...

99+

2023-08-17

java jar jvm
android实现获取正在运行的应用程序

因为在framework中想添加这个功能，所以写了个appliction来实现一下获取正在运行的应用程序：还是先看图吧：这个app主要是简单的实现了获取非系统的应用程序和一...

99+

2022-06-06

运行程序应用程序 Android
C++ 获取当前正在运行函数的名称

目录func、FUNCTION、__PRETTY_FUNCTION__的区别func、__FUNCTION__的区别？func、FUNCTION、__PRETTY_FUNCTION_...

99+

2023-05-16

C++ 获取运行函数名称 C++获取函数名称
TypeScript Typeof运算符的5个实用技巧详解

目录正文1.获取对象的类型2.获取一个将所有枚举键表示为字符串的类型3.获取函数对象的类型4.获取类对象的类型5. 获得更精确的类型正文在 JavaScript 中，你可以通过操作...

99+

2022-11-13

TypeScript Typeof运算符 TypeScript Typeof
读取、创建和运行多个文件的Python技巧有哪些

本篇内容介绍了“读取、创建和运行多个文件的Python技巧有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！动机将代码投入生产时，你很可能...

99+

2023-06-16
Android 获取正在运行的任务和服务的小例子

要获取正在运行的任务，首先需要声明一个活动对象管理器（ActivityManager）所有的活动任务都属于此，然后通过获取服务可以得到所...

99+

2022-06-06

和服运行 Android
php如何停止重启，取消正在执行的任务调度

前言：最近出现一个问题，同事误操作，开启了一个任务，找到我问能不能停止，我也是火急火燎查询方法帮忙解决，我觉得有必要做个记录，希望帮到有需要的人之前我写过Laravel和thinkphp的定时...

99+

2023-09-13

php 开发语言
详解C语言中二分查找的运用技巧

目录基础的二分查查找左侧边界查找右侧边界二分查找问题分析实例1: 爱吃香蕉的珂珂实例2：运送包裹前篇文章聊到了二分查找的基础以及细节的处理问题，主要介绍了查找和目标值相等的元素、查...

99+

2024-04-02
DEDECMS在PHP5.4不能正常运行的解决方法

本文实例讲述了DEDEcms在php5.4不能正常运行的解决方法。分享给大家供大家参考。具体分析如下： PHP5.4是公开发行的PHP程式最新版本,其执行速度和内存占用等相比PHP5.3而言有10%~30%的性能提升,所...

99+

2022-06-12

DEDECMS PHP5.4 不能正常运行解决方法
php-fpm reload 会取消正在处理请求的解决方案

目录起步reload 流程简介缓兵之计总结起步在测试中，发现 php-fpm reload 会强制 kill 掉正在处理的请求。网上查了一下，发现其他人也有这个问题并反馈给了官方：...

99+

2024-04-02
Vista技巧:何在Vista上运行不兼容的旧版本软件

　　软件不兼容是很常见的一件事，怎么将Win XP的软件在Vista上运行？下面本文将详细描述遇到Vista上运行不兼容的旧版本软件该怎么解决。　　尽管Win XP上的很多程序在Vista下都能够运行，但还是有一些虽然...

99+

2023-06-07

windows版本不兼容 Vista不兼容软件旧版本 : 技巧 Vista
Go语言运算符优先级排序的正确理解与应用技巧

如何正确理解和应用Go语言运算符的优先级排序作为一门强大而灵活的编程语言，Go语言提供了许多运算符来实现各种计算操作。为了正确地编写代码，我们需要了解和准确地应用运算符的优先级排序。本文将介绍Go语言中常用的运算符，并给出相应的代码示例，帮...

99+

2023-12-23

Go运算符优先级解析 Go运算符优先级应用指南