浅谈ES6原生Promise

yedf 发布于2019-08-20 10:30 / 257人阅读

摘要：如果有错误，则到的第二个回调函数中，对错误进行处理。假设第一个的第一个回调没有返回一个对象，那么第二个的调用者还是原来的对象，只不过其的值变成了第一个中第一个回调函数的返回值。

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开发者文档

以上。一点微小的见解，谢谢大家。

云服务器混合云 es6中的promise 设计浅谈浅谈javascript promise

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80182.html

浅谈Redux（之一)：Middleware原理

摘要：作为目前最火的模式实现之一，它有很多的点值得研究。这个函数既然要用于，也就是说它接收一个形式为的函数，对其一层层嵌套形式为。这个会在开始时发起一个，并在这个时发起另一个成功或失败的。为了方便起见，会返回这个让调用者可以等待。 Redux作为目前最火的Flux模式实现之一，它有很多的点值得研究。今天我们首先来看看它的Middleware。熟悉Express或者koa的朋友对Middle...

cocopeak 2019-08-22 10:34 评论0 收藏0
浅谈Javascript中Promise对象的实现

摘要：我们可以进行适当的改进，把回调函数写到外面即使是改写成这样，代码还是不够直观，但是如果有了对象，代码就可以写得非常清晰，一目了然，请看这样函数就不用写在的回调中了目前的标准中还未支持对象，那么我们就自己动手，丰衣足食吧。本文同步自我得博客：http://www.joeray61.com 很多做前端的朋友应该都听说过Promise（或者Deferred）对象，今天我就讲一下我对Prom...

caiyongji 2019-08-21 10:18 评论0 收藏0
2018 浅谈前端面试那些事

摘要：声明的变量不得改变值，这意味着，一旦声明变量，就必须立即初始化，不能留到以后赋值。虽然今年没有换工作的打算但为了跟上时代的脚步还是忍不住整理了一份最新前端知识点知识点汇总 1.HTML HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签IE6 bug，和一些定位写法css js放置位置和原因...

LiuRhoRamen 2019-08-30 14:11 评论0 收藏0
2018 浅谈前端面试那些事

摘要：声明的变量不得改变值，这意味着，一旦声明变量，就必须立即初始化，不能留到以后赋值。虽然今年没有换工作的打算但为了跟上时代的脚步还是忍不住整理了一份最新前端知识点知识点汇总 1.HTML HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签IE6 bug，和一些定位写法css js放置位置和原因...

stormgens 2019-08-22 15:34 评论0 收藏0
2018 浅谈前端面试那些事

摘要：声明的变量不得改变值，这意味着，一旦声明变量，就必须立即初始化，不能留到以后赋值。虽然今年没有换工作的打算但为了跟上时代的脚步还是忍不住整理了一份最新前端知识点知识点汇总 1.HTML HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签IE6 bug，和一些定位写法css js放置位置和原因...

Hujiawei 2019-08-01 18:43 评论0 收藏0