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

现在回头看，一定会有其他的常规解决方案)。

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

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

<!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方法，

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

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

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

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

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

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

如何在外部终止一个pengding的promise对象的更多相关文章

  1. 手把手教你实现一个完整的 Promise

    用过 Promise,但是总是有点似懂非懂的感觉,也看过很多文章,还是搞不懂 Promise的 实现原理,后面自己边看文章,边调试代码,终于慢慢的有感觉了,下面就按自己的理解来实现一个 Promise ...

  2. Promise原理讲解 && 实现一个Promise对象 (遵循Promise/A+规范)

    1.什么是Promise? Promise是JS异步编程中的重要概念,异步抽象处理对象,是目前比较流行Javascript异步编程解决方案之一 2.对于几种常见异步编程方案 回调函数 事件监听 发布/ ...

  3. ES6 Promise 对象

    Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Pro ...

  4. 微信小程序Promise对象

    Promise 对象 Promise 的含义 基本用法 Promise.prototype.then() Promise.prototype.catch() Promise.prototype.fin ...

  5. 13.Promise 对象

    Promise 对象 Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大.它由社区最早提出和实现,ES6 将其 ...

  6. ES6的Promise对象

    http://es6.ruanyifeng.com/#docs/promise Promise 对象 Promise 的含义 基本用法 Promise.prototype.then() Promise ...

  7. ES6的新特性（15）——Promise 对象

    Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了 ...

  8. ES6入门之Promise对象

    1. Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件更合理.更强大. 1.1 什么是Promise 简单来说就是一个容器,里面保存着某个未来才会结 ...

  9. 不难懂————Promise对象 + 详解

    1.Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了P ...

随机推荐

  1. JMeter 插件 Json Path 解析HTTP响应JSON数据

    一.基本简介 JMeter 是一个不错的负载和性能测试工具,我们也用来做 HTTP API 接口测试.我们的 API 返回结果为JSON数据格式.JSON 简介,JSON 教程. JSON 已经成为数 ...

  2. jQuery基础 (四)——使用jquery-cookie 实现点赞功能

    jquery-cookie 下载地址:https://github.com/carhartl/jquery-cookie 直接上代码 html <span class="jieda-z ...

  3. 深入理解cookie和session

    cookie和session在java web开发中扮演了十分重要的作用,本篇文章对其中的重要知识点做一些探究和总结. 1.cookie存在于浏览器 随意打开一个网址,用火狐的调试工具,随意选取一个链 ...

  4. ubuntu16.04+eigen3安装

    Eigen库安装指南(两种方式)1.apt-get方式(假设默认安装到/usr/local/include里,若实际中默认安装到了/usr/include的话,可以对应替换下面命令的相应部分);运行命 ...

  5. Caused by: org.xml.sax.SAXParseException; systemId: file:/home/hadoop/hive-0.12.0/conf/hive-site.xml; lineNumber: 5; columnNumber: 2; The markup in the document following the root element must be well

    1:Hive安装的过程(Hive启动的时候报的错误),贴一下错误,和为什么错,以及解决方法: [root@master bin]# ./hive // :: INFO Configuration.de ...

  6. 【转2】Appium 1.6.3 在Xcode 8 (真机）测试环境搭建 经验总结

    Appium 1.6.3 在Xcode 8 (真机)测试环境搭建经验总结 关于 Appium 1.6.3 在Xcode 8, 1真机上环境搭建问题更多,写此文章,供大家参考,让大家少走弯路. 在开始i ...

  7. windows 驱动开发入门——驱动中的数据结构

    最近在学习驱动编程方面的内容,在这将自己的一些心得分享出来,供大家参考,与大家共同进步,本人学习驱动主要是通过两本书--<独钓寒江 windows安全编程> 和 <windows驱动 ...

  8. [转载]mysql创建临时表，将查询结果插入已有表中

    今天遇到一个很棘手的问题,想临时存起来一部分数据,然后再读取.我记得学数据库理论课老师说可以创建临时表,不知道mysql有没有这样的功能呢?临时表在内存之中,读取速度应该比视图快一些.然后还需要将查询 ...

  9. HashMap源码阅读

    HashMap是Map家族中使用频度最高的一个,下文主要结合源码来讲解HashMap的工作原理. 1. 数据结构 HashMap的数据结构主要由数组+链表+红黑树(JDK1.8后新增)组成,如下图所示 ...

  10. css loading

    css /*loading*/ .loader { width: 100px; height: 101px; border: 8px solid; border-top-color: hsl(154, ...