这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
ES6 标准出炉之前,一个幽灵,回调的幽灵,游荡在 JavaScript 世界。正所谓世界本没有回调,写的人多了也就有了。接下来就来简单介绍 Javascript ES6 中的原生 Promise,有需要的可以参考借鉴。
前言
一个 Promise 对象可以理解为一次将要执行的操作(常常被用于异步操作),使用了 Promise 对象之后可以用一种链式调用的方式来组织代码,让代码更加直观。而且由于 Promise.all 这样的方法存在,可以让同时执行多个操作变得简单。
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
这样的逻辑。这个就是万恶的来源,也是 node 刚开始广为诟病的一点。
- try...catch
另外一个缺点就是,假设我们的三次保存之间并没有前后依赖关系,我们仍然需要等待前面的函数执行完毕, 才能执行下一步,而无法三个保存并行,之后返回一个三个保存过后需要的结果。(或者说实现起来需要技巧)
不幸的是,在我刚开始接触 node 的时候,我写了大量这样的 hell。
后来因为还是写前端代码多一些,我接触了 ES6,发现了一个解决回调深渊的利器 Promise。
其实早在 ES6 的 Promise 之前,Q,when.js,bluebird 等等库早就根据 Promise 标准(参考 Promise/A+)造出了自己的 promise 轮子。 (看过一篇文章,我觉得很有道理。里面说,不要扩展内置的原生对象。这种做法是不能面向未来的。所以这里有一个提示:使用扩展原生 Promise 的库时,需要谨慎。)
这里仅讨论原生的 Promise。
ES6 Promise
Promise 对象状态
在详解 Promise 之前,先来点理论:
Promise/A + 规范, 规定 Promise 对象是一个有限状态机。
它三个状态:
1、
(执行中)
- pending
2、
(成功)
- fulfilled
3、
(拒绝)
- reject
其中
为初始状态,
- pending
和
- fulfilled
为结束状态(结束状态表示 promise 的生命周期已结束)。
- rejected
状态转换关系为:
- 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
逻辑处理完毕并且没有错误时,
这个回调会将值传递到一个特殊的地方。这个特殊的地方在哪呢?就是下面代码中的 then,我们使用
- resolve
中的回调函数来处理
- then
后的结果。比如上面的代码中,我们将值简单的输出到控制台。如果有错误,则
- resolve
到
- reject
的第二个回调函数中,对错误进行处理。
- then
配合上面的有限状态机的理论,我们知道在 Promise 构造函数中执行回调函数代码时,状态为
,
- pending
之后状态为
- resolve
,
- fulfilled
之后状态为
- reject
- reject
Promise 数据流动
以上是 promise 的第一次数据流动情况。
比较 funny 的是,promise 的
方法依然能够返回一个 Promise 对象,这样我们就又能用下一个
- then
来做一样的处理。
- then
第一个
中的两个回调函数决定第一个
- then
返回的是一个什么样的 Promise 对象。
- then
假设第一个
的第一个回调没有返回一个 Promise 对象,那么第二个
- then
的调用者还是原来的 Promise 对象,只不过其 resolve 的值变成了第一个 then 中第一个回调函数的返回值。
- then
假设第一个
的第一个回调函数返回了一个 Promise 对象,那么第二个
- then
的调用者变成了这个新的 Promise 对象,第二个
- then
等待这个新的 Promise 对象 resolve 或者 reject 之后执行回调。
- then
话虽然饶了一点,但是我自我感觉说的还是很清楚的呢。哈哈~
如果任意地方遇到了错误,则错误之后交给遇到的第一个带第二个回调函数的
的第二个回调函数来处理。可以理解为错误一直向后
- then
, 直到被处理为止。
- reject
另外,Promise 对象还有一个方法
,这个方法接受一个回调函数来处理错误。
- catch
即:
- promise.
- catch(function(err) {
- // deal the err.
- })
假设对错误的处理是相似的,这个方法可以对错误进行集中统一处理。所以其他的 then 方法就不需要第二个回调啦~
控制并发的 Promise
Promise 有一个 "静态方法"——
(注意并非是 promise.prototype), 这个方法接受一个元素是 Promise 对象的数组。
- Promise.all
这个方法也返回一个 Promise 对象,如果数组中所有的 Promise 对象都
了,那么这些
- resolve
的值将作为一个数组作为
- resolve
这个方法的返回值的(Promise 对象)的
- Promise.all
值,之后可以被
- resolve
方法处理。如果数组中任意的 Promise 被
- then
, 那么该
- reject
的值就是
- reject
方法的返回值的
- Promise.all
值.
- reject
很 op 的一点是:
方法的第一个回调函数接收的
- then
值(如上所述,是一个数组)的顺序和
- resolve
中参数数组的顺序一致,而不是按时间顺序排序。
- Promise.all
还有一个和
相类似的方法
- Promise.all
,它同样接收一个数组,只不过它只接受第一个被
- Promise.race
的值。
- resolve
将其他对象变为 Promise 对象
方法,可以将不是 Promise 对象作为参数,返回一个 Promise 对象。
- Promise.resovle
有两种情形:
假设传入的参数没有一个
方法,那么这个返回的 Promise 对象变成了
- .then
状态,其
- resolve
的值就是这个对象本身。
- resolve
假设传入的参数带有一个
方法(称为
- then
对象), 那么将这个对象的类型变为 Promise, 其
- thenable
方法变成
- then
方法。
- Promise.prototype.then
Promise 是解决异步的方案吗?
最后说一点很重要的事:Promise 的作用是解决回调金字塔的问题,对于控制异步流程实际上没有起到很大的作用。真正使用 Promise 对异步流程进行控制,我们还要借助 ES6
函数。(例如 Tj 大神的 co 库的实现)。
- generator
然而 ES7 将有一个更加牛逼的解决方案:
,这个方案类似于 co, 但是加了原生支持。拭目以待吧。
- async/await
总结
以上就是关于 Javascript ES6 中原生 Promise 的全部内容了,希望本文的内容对大家学习 ES6 能有所帮助。如果有疑问可以留言交流。
来源: http://www.phperz.com/article/17/0514/332344.html