译者按: 对于Promise,也许你会用了,却并不理解;也许你理解了,却只可意会不可言传。这篇博客将从3个简单的视角理解Promise,应该对你有所帮助。

为了保证可读性,本文采用意译而非直译,并且对源代码进行了大量修改。另外,本文版权归原作者所有,翻译仅用于学习。

示例1中,asyncFunc()函数返回的是一个Promise实例:

// 示例1
function asyncFunc()
{
return new Promise(function(resolve, reject)
{
setTimeout(function()
{
resolve('Hello, Fundebug!');
}, 100);
});
}
 
asyncFunc()
.then(function(x)
{
console.log(x); // 1秒之后打印"Hello, Fundebug!"
});

1秒之后,Promise实例的状态变为resolved,就会触发then绑定的回调函数,打印resolve值,即”Hello, Fundebug!”。

那么,什么是Promise呢?

  • Promise调用是阻塞的
  • Promise中保存了异步操作结果
  • Promise是一个事件

Promise调用是阻塞的

示例2可以帮助我们理解阻塞

// 示例2
function asyncFunc()
{
return new Promise(function(resolve, reject)
{
setTimeout(function()
{
resolve('Hello, Fundebug!');
}, 1000);
});
}
 
async function main()
{
const x = await asyncFunc(); // (A)
console.log(x); // (B) 1秒之后打印"Hello, Fundebug!"
}
 
main();

以上代码是采用Async/Await语法写的,与示例1完全等价。await的中文翻译即为”等待”,这里可以”望文生义”。因此,相比于使用Promise实现,它更加直观地展示了什么是阻塞

  • (A)行: 等待asyncFunc()执行,直到它返回结果,并赋值给变量x
  • (B)行: 打印x

事实上,使用Promise实现时,也需要等待asyncFunc()执行,之后再调用then绑定的回调函数。因此,调用Promise时,代码也是阻塞的。

Promise中保存了异步操作结果

如果某个函数返回Promise实例,则这个Promise最初相当于一个空白的容器,当函数执行结束时,其结果将会放进这个容器。示例3通过数组模拟了这个过程:

// 示例3
function asyncFunc()
{
const blank = [];
setTimeout(function()
{
blank.push('Hello, Fundebug!');
}, 1000);
return blank;
}
 
const blank = asyncFunc();
 
console.log(blank); // 打印"[]"
 
setTimeout(function()
{
const x = blank[0]; // (A)
console.log(x); // 2秒之后打印"Hello, Fundebug!"
}, 2000);

开始时,blank为空数组,1秒之后,”Hello, Fundebug!”被添加到数组中,为了确保成功,我们需要在2秒之后从blank数组中读取结果。

对于Promise,我们不需要通过数组或者其他变量来传递结果,then所绑定的回调函数可以通过参数获取函数执行的结果。

Promise是一个事件

示例4模拟了事件:

// 示例4
function asyncFunc()
{
const eventEmitter = {
success: []
};
 
setTimeout(function()
{
for (const handler of eventEmitter.success)
{
handler('Hello, Fundebug!');
}
}, 1000);
 
return eventEmitter;
}
 
asyncFunc()
.success.push(function(x)
{
console.log(x); // 1秒之后打印"Hello, Fundebug!"
});

调用asyncFunc()之后,sucesss数组其实是空的,将回调函数push进数组,相当于绑定了事件的回调函数。1秒之后,setTimeout定时结束,则相当于事件触发了,这时sucess数组中已经注册了回调函数,于是打印”Hello, Fundebug!”。

Promise成功resolve时,会触发then所绑定的回调函数,这其实就是事件。

参考

版权声明:
转载时请注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2017/09/25/3-ways-to-understand-promise/

理解Promise的3种姿势的更多相关文章

  1. 理解Promise的三种姿势

    译者按: 对于Promise,也许你会用了,却并不理解:也许你理解了,却只可意会不可言传.这篇博客将从3个简单的视角理解Promise,应该对你有所帮助. 原文: Three ways of unde ...

  2. 大白话讲解Promise(二)理解Promise规范

    上一篇我们讲解了ES6中Promise的用法,但是知道了用法还远远不够,作为一名专业的前端工程师,还必须通晓原理.所以,为了补全我们关于Promise的知识树,有必要理解Promise/A+规范,理解 ...

  3. 彻底理解Promise对象——用es5语法实现一个自己的Promise(上篇)

    本文同步自我的个人博客: http://mly-zju.github.io/ 众所周知javascript语言的一大特色就是异步,这既是它的优点,同时在某些情况下也带来了一些的问题.最大的问题之一,就 ...

  4. 又拍云张聪:OpenResty 动态流控的几种姿势

    2019 年 1 月 12 日,由又拍云.OpenResty 中国社区主办的 OpenResty × Open Talk 全国巡回沙龙·深圳站圆满结束,又拍云首席架构师张聪在活动上做了< Ope ...

  5. 补习系列(7)-springboot 实现拦截的五种姿势

    目录 简介 姿势一.使用 Filter 接口 1. 注册 FilterRegistrationBean 2. @WebFilter 注解 姿势二.HanlderInterceptor 姿势三.@Exc ...

  6. 160701、理解 Promise 的工作原理

    Javascript 采用回调函数(callback)来处理异步编程.从同步编程到异步回调编程有一个适应的过程,但是如果出现多层回调嵌套,也就是我们常说的厄运的回调金字塔(Pyramid of Doo ...

  7. 160623、理解 Promise 的工作原理

    Javascript 采用回调函数(callback)来处理异步编程.从同步编程到异步回调编程有一个适应的过程,但是如果出现多层回调嵌套,也就是我们常说的厄运的回调金字塔(Pyramid of Doo ...

  8. 理解Promise简单实现的背后原理

    在写javascript时我们往往离不开异步操作,过去我们往往通过回调函数多层嵌套来解决后一个异步操作依赖前一个异步操作,然后为了解决回调地域的痛点,出现了一些解决方案比如事件订阅/发布的.事件监听的 ...

  9. Python 高级特性介绍 - 迭代的99种姿势 与协程

    Python 高级特性介绍 - 迭代的99种姿势 与协程 引言 写这个笔记记录一下一点点收获 测试环境版本: Python 3.7.4 (default, Sep 28 2019, 16:39:19) ...

随机推荐

  1. 背水一战 Windows 10 (118) - 后台任务: 后台下载任务(任务分组,并行或串行执行,组完成后通知)

    [源码下载] 背水一战 Windows 10 (118) - 后台任务: 后台下载任务(任务分组,并行或串行执行,组完成后通知) 作者:webabcd 介绍背水一战 Windows 10 之 后台任务 ...

  2. Android之.9图的知识

    Android之.9图的知识 .9图的介绍 .9图也称为pPatch图,它是android app开发里一种特殊的图片形式,文件的扩展名为:.9.png. 9patch图片的作用就是在图片拉伸的时候保 ...

  3. python 反转一个字符串

    old_str = 'abcd' new_str1 = old_str[::-1] print(new_str1) new_str2 = ''.join(reversed(old_str)) prin ...

  4. Zookeeper 集群安装配置,超详细,速度收藏!

    今天,栈长分享下 Zookeeper 的集群安装及配置. 下载 下载地址:http://zookeeper.apache.org/ 下载过程就不说了,我们下载了最新的zookeeper-3.4.11. ...

  5. css、css3总结

    关于figure元素和figcaption元素的解释与应用: https://www.w3cplus.com/html5/quick-tip-the-right-way-to-use-figure-a ...

  6. Zookeeper-watcher机制源码分析(一)

    Watcher的基本流程 ZooKeeper 的 Watcher 机制,总的来说可以分为三个过程:客户端注册 Watcher.服务器处理 Watcher 和客户端回调 Watcher 客户端注册wat ...

  7. php内核之HashTable

    Zend 把与 HashTable 有关的 API 分成了好几类以便于我们查找,这些 API 的返回值大多都是常量SUCCESS 或者 FAILURE. 初始化 HashTable 下面在介绍函数原型 ...

  8. [MySQL]增加约束键

    增加约束键 ALTER TABLE Persons ADD UNIQUE (P_Id) 创建表时加入约束键 CREATE TABLE Persons ( P_Id int NOT NULL, Last ...

  9. Java 容器 & 泛型:一、认识容器

    Writer:BYSocket(泥沙砖瓦浆木匠) 微博:BYSocket 豆瓣:BYSocket 容器是Java语言学习中重要的一部分.泥瓦匠我的感觉是刚开始挺难学的,但等你熟悉它,接触多了,也就“顺 ...

  10. python 备忘

    import jsonu='''{ "maps": [ { "id": "blabla", "iscategorical" ...