浅谈ES6原生Promise
浅谈ES6原生Promise
作者:samchowgo
链接:https://segmentfault.com/a/1190000006708151
ES6标准出炉之前,一个幽灵,回调的幽灵,游荡在JavaScript世界。
正所谓:
世界本没有回调,写的人多了,也就有了})})})})})。
Promise的兴起,是因为异步方法调用中,往往会出现回调函数一环扣一环的情况。这种情况导致了回调金字塔问题的出现。不仅代码写起来费劲又不美观,而且问题复杂的时候,阅读代码的人也难以理解。
举例如下:
db.save(data, function(data){
// do something...
db.save(data1, function(data){
// do something...
db.save(data2, function(data){
// do something...
done(data3); // 返回数据
})
});
});
假设有一个数据库保存操作,一次请求需要在三个表中保存三次数据。那么我们的代码就跟上面的代码相似了。这时候假设在第二个db.save出了问题怎么办?基于这个考虑,我们又需要在每一层回调中使用类似try...catch这样的逻辑。这个就是万恶的来源,也是node刚开始广为诟病的一点。
另外一个缺点就是,假设我们的三次保存之间并没有前后依赖关系,我们仍然需要等待前面的函数执行完毕, 才能执行下一步,而无法三个保存并行,之后返回一个三个保存过后需要的结果。(或者说实现起来需要技巧)
不幸的是,在我刚开始接触node的时候,我写了大量这样的hell。
作为一个有时还动下脑子的程序员,我尝试了朴灵大人的eventproxy。后来因为还是写前端代码多一些,我接触了ES6,发现了一个解决回调深渊的利器Promise。
其实早在ES6的Promise之前,Q,when.js,bluebird等等库早就根据Promise标准(参考Promise/A+)造出了自己的promise轮子。
(看过一篇文章,我觉得很有道理。里面说,不要扩展内置的原生对象。这种做法是不能面向未来的。所以这里有一个提示:使用扩展原生Promise的库时,需要谨慎。)
这里仅讨论原生的Promise。
ES6 Promise
Promise对象状态
在详解Promise之前,先来点理论:
Promise/A+规范, 规定Promise对象是一个有限状态机。它三个状态:
pending(执行中)
fulfilled(成功)
reject(拒绝)
其中pending为初始状态,fulfilled和rejected为结束状态(结束状态表示promise的生命周期已结束)。
状态转换关系为:
pending->fulfilled,pending->rejected。
随着状态的转换将触发各种事件(如执行成功事件、执行失败事件等)。
Promise形式
Promise的长相就像这样子:
var promise = new Promise(function func(resolve, reject){
// do somthing, maybe async
if (success){
return resolve(data);
} else {
return reject(data);
}
});
promise.then(function(data){
// do something... e.g
console.log(data);
}, function(err){
// deal the err.
})
这里的变量promise是Promise这个对象的实例。
promise对象在创建的时候会执行func函数中的逻辑。
逻辑处理完毕并且没有错误时,resolve这个回调会将值传递到一个特殊的地方。这个特殊的地方在哪呢?就是下面代码中的then,我们使用then中的回调函数来处理resolve后的结果。比如上面的代码中,我们将值简单的输出到控制台。如果有错误,则reject到then的第二个回调函数中,对错误进行处理。
配合上面的有限状态机的理论,我们知道在Promise构造函数中执行回调函数代码时,状态为pending,resolve之后状态为fulfilled,reject之后状态为reject
Promise数据流动
以上是promise的第一次数据流动情况。
比较funny的是,promise的then方法依然能够返回一个Promise对象,这样我们就又能用下一个then来做一样的处理。
第一个then中的两个回调函数决定第一个then返回的是一个什么样的Promise对象。
假设第一个then的第一个回调没有返回一个Promise对象,那么第二个then的调用者还是原来的Promise对象,只不过其resolve的值变成了第一个then中第一个回调函数的返回值。
假设第一个then的第一个回调函数返回了一个Promise对象,那么第二个then的调用者变成了这个新的Promise对象,第二个then等待这个新的Promise对象resolve或者reject之后执行回调。
话虽然饶了一点,但是我自我感觉说的还是很清楚的呢。哈哈~
如果任意地方遇到了错误,则错误之后交给遇到的第一个带第二个回调函数的then的第二个回调函数来处理。可以理解为错误一直向后reject, 直到被处理为止。
另外,Promise对象还有一个方法catch,这个方法接受一个回调函数来处理错误。即:
promise.catch(function(err){
// deal the err.
})
假设对错误的处理是相似的,这个方法可以对错误进行集中统一处理。所以其他的then方法就不需要第二个回调啦~
控制并发的Promise
Promise有一个”静态方法”——Promise.all(注意并非是promise.prototype), 这个方法接受一个元素是Promise对象的数组。
这个方法也返回一个Promise对象,如果数组中所有的Promise对象都resolve了,那么这些resolve的值将作为一个数组作为Promise.all这个方法的返回值的(Promise对象)的resolve值,之后可以被then方法处理。如果数组中任意的Promise被reject,那么该reject的值就是Promise.all方法的返回值的reject值.
很op的一点是:
then方法的第一个回调函数接收的resolve值(如上所述,是一个数组)的顺序和Promise.all中参数数组的顺序一致,而不是按时间顺序排序。
还有一个和Promise.all相类似的方法Promise.race,它同样接收一个数组,只不过它只接受第一个被resolve的值。
将其他对象变为Promise对象
Promise.resovle方法,可以将不是Promise对象作为参数,返回一个Promise对象。
有两种情形:
假设传入的参数没有一个.then方法,那么这个返回的Promise对象变成了resolve状态,其resolve的值就是这个对象本身。
假设传入的参数带有一个then方法(称为thenable对象), 那么将这个对象的类型变为Promise,其then方法变成Promise.prototype.then方法。
Promise是解决异步的方案吗?
最后说一点很重要的事:Promise的作用是解决回调金字塔的问题,对于控制异步流程实际上没有起到很大的作用。真正使用Promise对异步流程进行控制,我们还要借助ES6 generator函数。(例如Tj大神的co库的实现)。
然而ES7将有一个更加牛逼的解决方案:async/await,这个方案类似于co,但是加了原生支持。拭目以待吧。
文档
mozilla开发者文档(https://developer.mozilla.org/en-US/docs/Web/API/PromiseRejection/promise)
以上。一点微小的见解,谢谢大家。
浅谈ES6原生Promise的更多相关文章
- 浅谈ES6基础——Promise
IMAGE加载 Callback Hell function loadImg(src,callback,fail) { var img = document.createElement('img'); ...
- 浅谈ES6新特性
ES6的了解 新增模板字符串(为JavaScript提供了简单的字符串插值功能).箭头函数(操作符左边为输入的参数,而右边则是进行的操作以及返回的值Inputs=>outputs.).for-o ...
- 浅谈es6 promise
本文是借鉴于ac黄的博客. 接触es6也有几个月了,貌似没有系统的去学习过它,总是用到什么,查查什么.今天就说下es6中的promise对象. 先说说promise解决了什么问题? 写前端的同学都经常 ...
- 浅谈Javascript中Promise对象的实现
https://segmentfault.com/a/1190000000684654 What? Promise是CommonJS的规范之一,拥有resolve.reject.done.fail.t ...
- ES6原生Promise的所有方法介绍(附一道应用场景题目)
JS的ES6已经出来很久了,作为前端工程师如果对此还不熟悉有点说不过去.不过如果要问,Promise原生的api一共有哪几个?好像真的可以难倒一票人,包括我自己也忽略了其中一个不常用的API Prom ...
- 浅谈 es6 箭头函数, reduce函数介绍
今天来谈一下箭头函数, es6的新特性 首先我们来看下箭头函数长什么样子, let result = (param1, param2) => param1+param2; 上述代码 按照以前书写 ...
- 浅谈Generator和Promise原理及实现
Generator 熟悉ES6语法的同学们肯定对Generator(生成器)函数不陌生,这是一个化异步为同步的利器. 栗子: function* abc() { let count = 0; whil ...
- Node.js用ES6原生Promise对异步函数进行封装
Promise的概念 Promise 对象用于异步(asynchronous)计算..一个Promise对象代表着一个还未完成,但预期将来会完成的操作. Promise的几种状态: pending:初 ...
- 浅谈ES6
ECMAScript6.0(简称ES6)是javaScript语言的下一代标准,已经在2015年6月正式发布了.它的目标,使得javaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言 ...
随机推荐
- git版本控制工具的使用(2)
git checkout -b dev创建一个为dev的分支.并选择该分支. git branch dev 创建分支 git checkout dev 选择该分支 git branch 查看当前分支和 ...
- linux系统配置参数修改
一.永久修改主机名修改/etc/sysconfig/network,在里面指定主机名称HOSTNAME=然后执行命令hostname 主机名这个时候可以注销一下系统,再重登录之后就行了. 或者修改/e ...
- s4-4 以太网概述
以太网所处的位置 以太网的发展史 1973 Robert Metcalfe及其同事设计了以太网雏形(施乐公司) 1980 DIX发布最早的以太网标准,开放标准 1985 IEEE802.3对以太网作了 ...
- BZOJ 1444 [Jsoi2009]有趣的游戏 (AC自动机 + 概率DP + Gauss)
1444: [Jsoi2009]有趣的游戏 Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 1382 Solved: 498[Submit][Statu ...
- DOS的几个常用命令
1.rem:注释 DOS中的注释,其后面的内容会被自动忽略.双冒号(::)也有相同的效果 相当于R语言和Python中的# 2.set:设置变量 set var = 1 将1赋值给变量var 打印出来 ...
- 添加wifi adb
https://blog.csdn.net/ouyang_peng/article/details/50370786 首先弄懂怎么设置adb wifi无线调试的功能,如下所示. 1. 手机端开启adb ...
- i2c_client 几种实例化方法
http://blog.csdn.net/lugandong/article/details/48092397
- webService之helloword(java)
webservice 远程数据交互技术 1.导入jar包(如果是 maven项目导入项目坐标) 2.创建服务 3.测试服务 我们使用maven来做测试服务 pom.xml文件 <project ...
- (最长上升子序列 并记录过程)FatMouse's Speed -- hdu -- 1160
http://acm.hdu.edu.cn/showproblem.php?pid=1160 FatMouse's Speed Time Limit: 2000/1000 MS (Java/Other ...
- 《mysql必知必会》学习_第七章_20180730_欢
第七章:数据过滤 P43 select prod_id,prod_price,prod_name from products where vend_id =1003 and prod_price &l ...