如何在外部终止一个pengding状态的promise对象

时间 2020-06-04

标签如何外部终止一个 pengding 状态 promise 对象繁體版

原文原文链接

今天在整理前段时间作过的项目，发现以前在集成web环信的时候遇到过一个奇怪的需求：
须要终止一个正在进行等待返回的promise，或者阻止其调用resolve和reject。(具体为什么会有这种需求我也不太记得了。。。javascript

如今回头看，必定会有其余的常规解决方案)。html

不过本着对未知牛角尖的专研精神(最近有点闲)，在咨询知乎大神，重读阮大神的《es6入门》书中promise一章后，java

找到了一个原生js的解决方案：Promise.race。es6

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <button onclick="getInterface()">发送请求</button>
        <button id="cancel">取消调用接口</button>
        <script type="text/javascript">
            //Promise.race([a,b])参数为一个promise对象组成的数组，
            //此方法用来比较啊a和b哪个promise先返回，Promise.race结果就返回这个先返回的promise参数

            function getInterface() { var promise1 = new Promise(function(resolve, reject) {
　　　　　　　　　　　　//模拟ajax异步请求 setTimeout(resolve, 3000, '接口返回成功！'); }); var promise2 = new Promise(function(resolve, reject) { document.querySelector('#cancel').addEventListener('click', function() { reject('取消等待接口！'); }); }); Promise.race([promise1, promise2]).then(function(value) { console.log(value); }).catch(function(value) { console.log(value); }); } </script>
    </body>
</html>

上面的代码点击发送请求按钮后，调用getIterface方法，web

方法内建立并当即执行两个promise函数：promise1和promise2。Promise.race方法当即开始监听这两个promise对象的状态。ajax

1. 若是3秒内用户有任何操做，那么promise1内的resolve方法被调用：此时“接口”返回成功，Promise.race再也不监听promise2的状态，数组

直接返回接口的返回结果：'接口返回成功！'。promise

2. 若是3秒内用户点击取消调用接口按钮，那么promise2内的reject方法被调用，此时Promise.race再也不监听promise2(异步接口)的返回状态，异步

直接返回promise2的返回结果：'取消等待接口'。函数

这样就能够模拟外部中断promise返回结果了，好比 promise1是一个ajax请求，那么就能够在返回前在Promise.race中abort()请求了。