如何中止一个 Promise 呢?一个有意思的问题

2024年 5月 20日 103.0k 0

前言

最近看到一道大厂的面试题,我觉得这道题不错,能考验到大家的 Promise 基础。题目如下~

如何中止一个 Promise 呢?一个有意思的问题-1

看到这道题你们会怎么去回答呢?就比如有以下的一个 Promise ,我们要如何去中止他呢?

如何中止一个 Promise 呢?一个有意思的问题-2

如何中止一个 Promise 呢?一个有意思的问题-3

用变量去中断?

很多人会第一时间想到,使用一个变量去控制要不要中止这个 Promise:

如何中止一个 Promise 呢?一个有意思的问题-4

如何中止一个 Promise 呢?一个有意思的问题-5

但是你们觉得这样是对的吗?其实这样并不是真正的中止,因为我们只是限制了 resolve 的执行,但是 setTimeout 还是走完了,所以输出了 请求到数据:

如何中止一个 Promise 呢?一个有意思的问题-6

而真正的中止,肯定是把 setTimeout 也中止掉,所以需要改改:

如何中止一个 Promise 呢?一个有意思的问题-7

如何中止一个 Promise 呢?一个有意思的问题-8

但是可以看到,新增一个标识变量,非常的繁琐,况且如果有多个 Promise,那就得要有多个标识变量,非常麻烦,所以换一种方式。

Promise.race?

我们在工作中都会使用到 Promise.race这个方法去判断一个请求有没有超时,那同理,可不可以用 Promise.race 来进行中止 Promise 的操作呢?

如何中止一个 Promise 呢?一个有意思的问题-9

如何中止一个 Promise 呢?一个有意思的问题-10

可以看到,这个中止也不是真的中止,也只是限制了 resolve 的执行,而不是把 setTimeout 也给中断了~

CancelToken

接下来是红宝书上的做法,堪称经典,不用使用任何全局的标识变量,也能做到中止 Promise:

如何中止一个 Promise 呢?一个有意思的问题-11

如何中止一个 Promise 呢?一个有意思的问题-12

这种做法的好处是:

  • 不需要设置全局的标识变量
  • 多个请求并发也可以区别取消

比如我多次执行的话,想取消哪次就取消哪次,因为每次的 CancelToken实例都是新的!!!

如何中止一个 Promise 呢?一个有意思的问题-13

如何中止一个 Promise 呢?一个有意思的问题-14

相关文章

JavaScript2024新功能:Object.groupBy、正则表达式v标志
PHP trim 函数对多字节字符的使用和限制
新函数 json_validate() 、randomizer 类扩展…20 个PHP 8.3 新特性全面解析
使用HTMX为WordPress增效:如何在不使用复杂框架的情况下增强平台功能
为React 19做准备:WordPress 6.6用户指南
如何删除WordPress中的所有评论

发布评论