如何在外部终止一个pengding的promise对象
今天在整理前段时间做过的项目，发现之前在集成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对象的更多相关文章
- 手把手教你实现一个完整的 Promise
用过 Promise,但是总是有点似懂非懂的感觉,也看过很多文章,还是搞不懂 Promise的 实现原理,后面自己边看文章,边调试代码,终于慢慢的有感觉了,下面就按自己的理解来实现一个 Promise ...
- Promise原理讲解 && 实现一个Promise对象 (遵循Promise/A+规范)
1.什么是Promise? Promise是JS异步编程中的重要概念,异步抽象处理对象,是目前比较流行Javascript异步编程解决方案之一 2.对于几种常见异步编程方案 回调函数 事件监听 发布/ ...
- ES6 Promise 对象
Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Pro ...
- 微信小程序Promise对象
Promise 对象 Promise 的含义 基本用法 Promise.prototype.then() Promise.prototype.catch() Promise.prototype.fin ...
- 13.Promise 对象
Promise 对象 Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大.它由社区最早提出和实现,ES6 将其 ...
- ES6的Promise对象
http://es6.ruanyifeng.com/#docs/promise Promise 对象 Promise 的含义 基本用法 Promise.prototype.then() Promise ...
- ES6的新特性（15）——Promise 对象
Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了 ...
- ES6入门之Promise对象
1. Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件更合理.更强大. 1.1 什么是Promise 简单来说就是一个容器,里面保存着某个未来才会结 ...
- 不难懂————Promise对象 + 详解
1.Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了P ...
随机推荐
- Elastic 技术栈之 Filebeat
Elastic 技术栈之 Filebeat 简介 Beats 是安装在服务器上的数据中转代理. Beats 可以将数据直接传输到 Elasticsearch 或传输到 Logstash . Beats ...
- 虚拟机下linux系统安装nginx
近在windows虚机下安装nginx,也遇到部分问题,写篇随笔总结一下 一.安装虚机 windows下安装虚拟机我就不说了,一搜一大把,一直下一步就ok了 二. 打开虚拟安装nginx 1.选择版本 ...
- 基于MATLAB的中值滤波均值滤波以及高斯滤波的实现
基于MATLAB的中值滤波均值滤波以及高斯滤波的实现 作者:lee神 1. 背景知识 中值滤波法是一种非线性平滑技术,它将每一像素点的灰度值设置为该点某邻域窗口内的所有像素点灰度值的中值. 中值滤 ...
- ThreadLocal从源码到应用
最早接触到ThreadLocal是在阅读dianping的Cat-client,当时对它不是很理解,就搜索了一下,大概了解是一种解决线程安全问题的机制.现在再次阅读<实战java高并发程序设计& ...
- php消息队列之 think queue消息队列初体验
使用thinkphp 5的 消息队列 think queue ● php think queue:listen --queue queuename ● php think queue:work -- ...
- 微信小程序开发模板消息的时候 出现 errcode: 41028, errmsg: "invalid form id hint:
小程序开发模板消息的时候 出现 errcode: 41028, errmsg: "invalid form id hint: 我是使用的微信支付发送模板消息,提示的formid无效的 大家 ...
- ［Redis源码阅读］dict字典的实现
dict的用途 dict是一种用于保存键值对的抽象数据结构,在redis中使用非常广泛,比如数据库.哈希结构的底层. 当执行下面这个命令: > set msg "hello" ...
- 浅谈Vue模板的那些事儿
接触过vue的童鞋都知道,组件的模板一般都是在template选项内定义的,如 Vue.component('child-component', { template: '<h3>我是闰土 ...
- 必须掌握的ES6新特性
ES6(ECMAScript2015)的出现,让前端开发者收到一份惊喜,它简洁的新语法.强大的新特性,带给我们更便捷和顺畅的编码体验,赞! 以下是ES6排名前十的最佳特性列表(排名不分先后): 1.D ...
- C# 读取系统日志
.NET框架类库提供了EventLog类和EventLogEntry类与系统日志进行交互二者属于System.Diagnostics命名空间 EventLog 类的属性主要有 Entris返回一个Ev ...