如何优雅地中断 Promise?( 三 )


如果我们把这个时间修改为2000毫秒的话,那么控制台输出的结果可能是 ok 也可能是一个 not good 的异常捕获 。
有同学看到这里可能会说,好像不需要 也可以实现主动取消的 ,我可以使用一个普通的 结合 也可以实现类似的效果 。
当然我们也可以这样做,但是一般情况下我们的异步操作是包含网络请求的,如果网络请求使用的是 方法的话,那么就必须使用 类型的实例 进行信号的传递;因为 方法内部会根据 的状态来判断到底需不需要终止正在进行的请求 。
的相关属性和方法:

如何优雅地中断 Promise?

文章插图
开发中其他场景的使用举例
取消事件监听的一种便捷方法
一般情况下,如果我们对文档中的某个 DOM 元素添加了事件监听,那么当这个元素被销毁或者移除的时候,也需要相应的把对应的事件监听函数移除掉,不然很容易出现内存泄漏的问题 。所以一般情况下我们会按照下面的方式添加并且移除相关的事件监听函数 。
这种方式是最通用的方式,但是这种方式需要我们保留对应事件监听函数的引用,比如上面的。一旦我们丢失了这个引用,那么后面就没有办法取消这个事件监听了 。
另外,有些应用场景需要你给某个元素添加很多事件处理函数,取消的时候就需要一个一个去取消,很不方便 。这个时候我们的 就可以派上用场了,我们可以使用 来同时取消很多事件的事件监听函数 。就像我们同时取消很多个 请求一样 。代码如下:
这样的处理方式是不是就很方便,也非常的清楚明了 。
的第三个参数可以是一个 对象,这个对象可以让我们传递一个 对象用来作为事件取消的信号对象 。就像上面我们使用 对象来取消 请求那样 。
如何优雅地中断 Promise?

文章插图
从上面的兼容性来说,这个属性的兼容性还是可以的;目前只有 Opera Android 和 Node.js 暂时还不支持,如果想要使用这个新的属性,需要针对这两个平台和运行环境做一下兼容处理就好了 。
一种值得借鉴的处理复杂业务逻辑的方法
我们有时开发中会遇到一些比较复杂的处理操作,比如你要先通过好几个接口获取数据,然后组装数据;然后再把这些数据异步地绘制渲染到页面上 。如果用户主动取消了这个操作或者因为超时了,我们要主动取消这些操作 。对于这种场景,使用 配合 也有不错的效果,下面举一个简单的例子:
上面是一个简化的例子,用来表示这种复杂的操作;我们可以看到,如果用户主动取消或者因为超时取消操作;我们上面的代码逻辑可以很方便的处理这种情况 。也不会因为少处理了一些操作而导致可能发生的内存泄漏 。
一旦我们想重新开始这个操作,我们只需要再次调用 并且传递一个新的 对象就可以了 。这样处理后,重新开始和取消的逻辑就非常清楚了 。如果大家在自己的项目中有类似的这种操作,不妨可以试试这种处理方法 。
在 Node.js 中的使用
我们不仅可以在浏览器环境中使用 和 ,还可以在 环境中使用这两个功能 。对于 中的 ,,,和 以及新版本支持的 都可以使用 来进行操作的取消 。下面我们来举一个简单的例子,关于读取文件的操作:
运行代码可以看到终端的输出如下:
经常使用 进行业务开发的同学可以尝试使用这个新的特性,应该对开发会很有帮助的 。
反馈和建议
这篇文章到这里就算结束啦,不知道有多少同学坚持读完了这篇文章;希望读完的同学都能够掌握好这篇文章中讲解的知识 。如果这篇文章帮到了你,或者打开了你的新世界;欢迎点赞转发 。
参考的相关网址
MDN - AbortController
DOM Living Standard - Interface AbortController
How to Cancel Promise with AbortController
Using AbortController as an Alternative for Removing Event Listeners
The complete guide to AbortController in Node.js
AbortController is your friend
Fetch: Abort
Abortable fetch
EventTarget.addEventListener()
MDN - fetch()
- EOF -




推荐阅读