ES6 Promise(2)
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刚开始广为诟病的一点。
另外一个缺点就是,假设我们的三次保存之间并没有前后依赖关系,我们仍然需要等待前面的函数执行完毕, 才能执行下一步,而无法三个保存并行,之后返回一个三个保存过后需要的结果。(或者说实现起来需要技巧)
其实早在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的生命周期已结束)。
状态转换关系为:
1
|
pending->fulfilled,pending->rejected。
|
随着状态的转换将触发各种事件(如执行成功事件、执行失败事件等)。
Promise形式
Promise的长相就像这样子:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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
,这个方法接受一个回调函数来处理错误。即:
JavaScript
1
2
3
|
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
,但是加了原生支持。拭目以待吧。
ES6 Promise(2)的更多相关文章
- 通过 ES6 Promise 和 jQuery Deferred 的异同学习 Promise
Deferred 和 Promise ES6 和 jQuery 都有 Deffered 和 Promise,但是略有不同.不过它们的作用可以简单的用两句话来描述 Deffered 触发 resolve ...
- ES6 Promise 接口
构造函数 new Promise(function(resolve, reject){}); 构造函数接受一个函数(executor)作为参数,该函数在返回 Promise 实例之前被调用.函数的两个 ...
- Es6 Promise 用法详解
Promise是什么?? 打印出来看看 console.dir(Promise) 这么一看就明白了,Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方 ...
- ES6 Promise 全面总结
转载:点击查看原文 ES6 Promise对象 ES6中,新增了Promise对象,它主要用于处理异步回调代码,让代码不至于陷入回调嵌套的死路中. @-v-@ 1. Promise本质 Promise ...
- ES6 Promise 异步操作
最近越来越喜欢与大家进行资源分享了,并且及时的同步到自己的园子内,为什么呢? 一.小插曲(气氛搞起) 在上个月末,由于领导的高度重视(haha,这个高度是有多高呢,185就好了),走进了公司骨干员工的 ...
- 微信小程序Http高级封装 es6 promise
公司突然要开放微信小程序,持续蒙蔽的我还不知道小程序是个什么玩意. 于是上网查了一下,就开始着手开发..... 首先开发客户端的东西,都有个共同点,那就是 数据请求! 看了下小程序的请求方式大概和a ...
- 解析ES6 Promise
ES6 Promise 概念之类的,大概读者都应该有所知道,接下来我们直入终点. 先让我们来看看什么是Promise吧,他是一个object,类,arry,function? 首先,学习它的时候应该讲 ...
- jquery Promise和ES6 Promise的区别
1. Deferred对象有resolve和reject方法,可以直接修改状态 jquery用Deferred实现了Promise规范,Deferred与ES6 Promise的最大区别是: Defe ...
- ES6 Promise对象then方法链式调用
then()方法的作用是Promise实例添加解决(fulfillment)和拒绝(rejection)状态的回调函数.then()方法会返回一个新的Promise实例,所以then()方法后面可以继 ...
随机推荐
- ZOJ 3180 Number Game(模拟,倒推)
题目 思路: 先倒推!到最后第二步,然后: 初始状态不一定满足这个状态.所以我们要先从初始状态构造出它出发的三种状态.那这三种状态跟倒推得到的状态比较即可. #include<stdio.h&g ...
- ie 浏览器下ajax请求来自缓存的解决方法
如上图所示,在ie浏览器下发出的请求,如何缓存中已经出现过这条请求记录,则不会请求服务端数据,解决方法是在请求后增加一个随机数,使每次请求都不同*可以添加当前时间戳 url+'?t='+Date.no ...
- models中,字段参数limit_choices_to的用法
这里,在使用 ModelForm 渲染前端页面的前提下,对于 models 中的 ManyToManyField 类型字段会在 ModelForm 中被转化为 ModelMultipleChoiceF ...
- c#获取文字全拼音
class Program { /// <summary> /// 获得拼音 /// </summary> /// <param name="str_Spell ...
- 【 Codeforces Global Round 1 B】Tape
[链接] 我是链接,点我呀:) [题意] x轴上有m个连续的点,从1标号到m. 其中有n个点是特殊点. 让你用k段区间将这n个点覆盖. 要求区间的总长度最小. [题解] 一开始假设我们需要n个胶带(即 ...
- 【Mail.Ru Cup 2018 Round 2 A】 Metro
[链接] 我是链接,点我呀:) [题意] [题解] 1:一直往右走的情况. 2:中间某个地方中转 (不会出现超过1次的转弯. (如果超过了和1次是等价的 [代码] #include <bits/ ...
- JavaSE 学习笔记之多态(七)
多 态:函数本身就具备多态性,某一种事物有不同的具体的体现. 体现:父类引用或者接口的引用指向了自己的子类对象.//Animal a = new Cat(); 多态的好处:提高了程序的扩展性. 多态的 ...
- 几个有用的shell命令
1.!$ 是一个特殊的环境变量,它代表了上一个命令的最后一个字符串.如:你可能会这样: $mkdir mydir$mv mydir yourdir$cd yourdir 可以改成: $mkdir my ...
- VI 快捷操作 【持续更新】
2014-9-23 一. 大小写转换 vim中大小写转化的命令是 gu或者gU 形象一点的解释就是小u意味着转为小写:大U意味着转为大写. 剩下的就是对这两个命令的限定(限定操作的行,字母,单词) ...
- Linux下diff与patch命令的配合使用
在Linux下,diff与patch命令配合使用可以进行简单的代码维护工作. [A] diff diff命令用于比较文件的差异,可以用于制作patch文件.但此命令参数众多.格式多样,所以在此仅介绍较 ...