0 媒介

我一向认为我对Promise比较相识，相干的要领已非常熟习了，直到我看到这篇文章，内里提出了如许一个题目：
Q: 假定 doSomething() 和 doSomethingElse() 均返回 promises，下面的四种 promises 的区分是什么

        //1
        doSomething().then(function(){
            return doSomethingElse();
        }).then(finalHandler);
        
        //2
        doSomething().then(function(){
            doSomethingElse();
        }).then(finalHandler);
        
        //3
        doSomething().then(doSomethingElse())
        .then(finalHandler);
        
        //4
        doSomething().then(doSomethingElse)
        .then(finalHandler);

我当时看了是受惊的，因为我想，这都什么玩艺儿！！！所以我把Promise的要领温习了一遍，而且细致读了上面提到的那篇文章，因而就有了这篇文章。

在前端开辟的进修中，新东西屡见不鲜，明白当前的基础是要明白过去，然后相识未来。就异步挪用而言，ES6中引入Promise简化异步操纵，主要针对的题目就是回调函数的层层嵌套（金字塔题目），除了浏览不轻易以外，只能在当前回调函数函数内部处置惩罚非常，这个很难做。Promise经由过程then和catch要领完成链式挪用，每一次挪用都返回一个Promise对象，摆脱了回调函数层层嵌套的题目和异步代码“非线性实行”的题目；别的，一切回调函数的报错都可以经由过程Promise一致处置惩罚，catch可以捕捉先前挪用中一切的非常（冒泡特征）。然则Promise仅仅是对回调做了简化处置惩罚，ES7中的async函数更凶猛，连系Promise，完整不必回调函数，以近似同步的写法完成异步操纵，所须要的仅仅是一个async和await关键字罢了。本文仅引见Promise对象，以及ES6中Promise对象具有的一些操纵要领。

1 简朴Promise对象

ES6中原生完成了Promise对象，经由过程状况通报异步操纵的音讯。Promise对象有三种状况：pending(进行中)、resoleved(fulfilled,已完成)、rejected(已失利)，依据异步操纵的效果决议处于何种状况。一旦状况转变就不可再变，状况转变唯一两种pending=>rejected、pending=>resolved。
长处：防止了层层嵌套的回调函数，并供应了一致的接口，使异步操纵越发轻易。
瑕玷：没法作废Promise；假如不设置回调函数，内部毛病没法反应到外部。

1.1 建立Promise实例

Promise组织函数吸收两个参数：resolve和reject，这是两个由JavaScript引擎自动供应的函数，不必本身布置。resolve函数在异步操纵胜利时挪用，作用是将Promise对象的状况由pending变成resolved，并将异步操纵的效果通报出去。reject函数在异步操纵失利时挪用，作用是将Promise对象的状况由pending变成reject，将异步操纵报错通报出去。
then要领可以接收两个回调函数作为参数，第一个是Pormise对象的状况变成resolved时挪用，另一个是当Promise对象的状况变成rejected时挪用，这两个回调函数都接收Promise对象实例建立过程当中resolve函数和reject函数传出的值作为参数。第二个参数可选，事实上平常经由过程Promise.prototype.catch()挪用发作毛病时的回调函数，经由过程then挪用异步操纵胜利时的回调函数。
实例1：

        //返回Promise对象，setTimeout中通报的resolve参数为’done’
        function timeout(ms) {
          return new Promise((resolve, reject) => {
            setTimeout(resolve, ms, 'done');
          });
        }
        
        timeout(100).then((value) => {
          console.log(value);
        }); //done

实例2：Promise实行流

        //建立Promise实例
        let promise = new Promise(function(resolve, reject) {
          console.log('Promise');//马上实行
          resolve();
        });
        //resolved状况挪用在当前剧本一切同步使命实行完才会实行
        promise.then(function() {
          console.log('Resolved.');
        });
        //马上实行
        console.log('Hi!');

对以上代码，Promise新建后马上实行，所以起首输出的是“Promise”。然后，then要领指定的回调函数，将在当前剧本一切同步使命实行完才会实行，所以“Resolved”末了输出。

reject函数在异步操纵失利时挪用，因而参数常常是一个毛病对象（Error Object）；resolve函数在操纵胜利时挪用，参数常常是正常值或许另一个Promise实例，这表征了异步嵌套，异步嵌套的外层Promise要守候内层Promise的状况决议下一步状况。

        var p1 = new Promise(function (resolve, reject) {
          setTimeout(() => reject(new Error('fail')), 3000)
        })
        
        var p2 = new Promise(function (resolve, reject) {
          setTimeout(() => resolve(p1), 1000)
        })

        p2.then(result => console.log(result)) //p1 is rejected, p2 is the same as p1
          .catch(error => console.log(error)) // Error: fail

因为p2的resolve要领将p1作为参数，p1的状况决议了p2的状况，假如p1的状况是pending，p2的回调函数会守候p1的状况转变；假如p1的状况是resolved或rejected，p2的回调函数马上实行。p2的状况在1秒今后转变，resolve要领返回的是p1。此时，因为p2返回的是另一个Promise，所以背面的then语句都变成针对后者（p1）。又过了2秒，p1变成rejected，致使触发catch要领指定的回调函数。

1.2 Promise.prototype.then()

then要领为Promise实例增加状况转变时的回调函数，返回一个新的Promise实例，可以采纳链式写法，前一个then要领的返回值作为后一个then要领的参数：

        getJSON("/posts.json").then(function(json) {  // json comes from “/posts.json”
          return json.post;
         }).then(function(post) {  //post comes from json.post
          // ...
        });

假如第一个then要领内的回调函数返回一个Promise对象，后续的then要领会依据这个新的Promise对象的状况实行回调函数。

        getJSON("/post/1.json").then(function(post) {
          return getJSON(post.commentURL);
        }).then(function funcA(comments) {
          console.log("Resolved: ", comments);
        }, function funcB(err){
          console.log("Rejected: ", err);
        });

第一个then要领指定的回调函数，返回的是另一个Promise对象。这时候，第二个then要领指定的回调函数，就会守候这个新的Promise对象状况发作变化。假如变成Resolved，就挪用funcA，假如状况变成Rejected，就挪用funcB。回调函数平常是匿名函数，上述仅仅是为了便于明白写成定名函数。

1.3 Promise.prototype.catch()

catch(rejection)要领是then(null,rejection)的别称，仅仅当发作毛病时实行，catch的存在是将毛病回调函数从then()要领中剥离出来。

        getJSON('/posts.json').then(function(posts) {
          // ...
        }).catch(function(error) {
          // 处置惩罚 getJSON 和 前一个回调函数运行时发作的毛病
          console.log('发作毛病！', error);
        });

Promise 对象的毛病具有“冒泡”性子，会一向向后通报，直到被捕捉为止。也就是说，毛病老是会被下一个catch语句捕捉。

        getJSON('/post/1.json').then(function(post) {
          return getJSON(post.commentURL);
        }).then(function(comments) {
          // some code
        }).catch(function(error) {
          // 处置惩罚前面三个Promise发生的毛病
        });

catch要领返回的照样一个 Promise 对象，因而背面还可以接着挪用then要领。如果后续then要领内里报错，就与前面的catch无关了。假如末了一个catch要领内部抛出毛病，是没法捕捉的。为了防止潜伏毛病，最好是在末了用一个catch要领兜底。

1.4 Promise.all()：着重状况转变的逻辑与关联

用于将多个Promise实例包装成一个新的Promise实例。假如内部参数不是Promise实例，就挪用Promise.resolve()将参数转换为Promise实例。

        var p = Promise.all([p1, p2, p3]);//接收一个Promise数组作为参数

p的状况由p1、p2、p3决议，显现&关联，fulfilled对应1，rejected对应0，分红两种状况：
（1）只需p1、p2、p3的状况都变成fulfilled，p的状况才会变成fulfilled，此时p1、p2、p3的返回值构成一个数组，通报给p的回调函数。
（2）只需p1、p2、p3当中有一个被rejected，p的状况就变成rejected，此时第一个被reject的实例的返回值（rejected的递次有无相似与操纵的递次？），会通报给p的回调函数。

        const databasePromise = connectDatabase();
        const booksPromise = databasePromise
          .then(findAllBooks);
        
        const userPromise = databasePromise
          .then(getCurrentUser);
        
        Promise.all([
          booksPromise,
          userPromise
        ])
        .then(([books, user]) => pickTopRecommentations(books, user));

上面代码中，booksPromise和userPromise是两个并行实行的异步操纵，只需比及它们的效果都返回了，才会触发pickTopRecommentations这个回调函数。

1.5 Promise.race()：着重状况转变的时候递次

Promise.race()和Promise.all()同样是将多个Promise实例包装成一个新的Promise实例，然则只需实例数组中有一个实例领先转变状况，p的状况就随着转变。谁人领先转变的 Promise 实例的返回值，就通报给新实例的回调函数。

        var p = Promise.race([p1, p2, p3]);

Promise.race要领的参数与Promise.all要领一样，假如不是 Promise 实例，就会先挪用下面讲到的Promise.resolve要领，将参数转为 Promise 实例，再进一步处置惩罚。

        const p = Promise.race([
          fetch('/resource-that-may-take-a-while'),
          new Promise(function (resolve, reject) {
            setTimeout(() => reject(new Error('request timeout')), 5000)
          })
        ]);
        p.then(response => console.log(response));
        p.catch(error => console.log(error));

上面代码中，假如5秒以内fetch要领没法返回效果，变量p的状况就会变成rejected，从而触发catch要领指定的回调函数。

1.6 Promise.resolve()

将现有对象转化为Promise对象，依据参数差别有差别效果：
(1) 参数是一个Promise实例，Promise.resolve()将原对象返回；
(2) 参数是具有then要领的对象，Promise.resolve要领会将这个对象转为Promise对象，然后就马上实行thenable对象的then要领。

        let thenable = {
          then: function(resolve, reject) {
            resolve(42);
          }
        };
        
        let p1 = Promise.resolve(thenable);
        p1.then(function(value) {
          console.log(value);  // 42
        });

thenable对象的then要领实行后，对象p1的状况就变成resolved，从而马上实行末了谁人then要领指定的回调函数，输出42。

(3) 假如参数是一个原始值(基础范例值)，或许是一个不具有then要领的对象，则Promise.resolve要领返回一个新的Promise对象，状况为Resolved。

        var p = Promise.resolve('Hello');
        p.then(function (s){
          console.log(s)
        });
        // Hello

上面代码天生一个新的Promise对象的实例p。因为字符串Hello不属于异步操纵（推断要领是它不是具有then要领的对象），返回Promise实例的状况从一天生就是Resolved，所以回调函数会马上实行。Promise.resolve要领的参数，会同时传给回调函数。
(4) Promise.resolve要领许可挪用时不带参数，直接返回一个Resolved状况的Promise对象。所以，假如愿望获得一个Promise对象，比较轻易的要领就是直接挪用Promise.resolve要领。

        var p = Promise.resolve();
        p.then(function () {
          // ...
        });

马上resolve的Promise对象，是在本轮“事宜轮回”（event loop）的结束时，而不是鄙人一轮“事宜轮回”的最早时，这个很好明白，经由过程resolve发生的Promise对象然后挪用then函数和先发生Promise对象，对象转换成resolved后再实行then函数是一样的，都是在本轮事宜轮询的末端实行。

        //下一轮事宜轮询最早
        setTimeout(function () {
          console.log('three');
        }, 0);
        //本轮事宜轮询末端
        Promise.resolve().then(function () {
          console.log('two');
        });
        //马上实行
        console.log('one');
        
        // one two three

上面代码中，setTimeout(fn, 0)鄙人一轮“事宜轮回”最早时实行，Promise.resolve()在本轮“事宜轮回”结束时实行，console.log(’one‘)则是马上实行，因而最早输出。

1.7 Promise.reject()

Promise.reject()返回一个Promise实例，实例状况为rejected。Promise.reject()要领的参数，会一成不变地作为reject的来由，变成后续要领的参数。这一点与Promise.resolve要领不一致。
实例1：

        var p = Promise.reject('失足了');
        // 等同于var p = new Promise((resolve, reject) => reject('失足了'))
        //参数就是’失足了’
        p.then(null, function (s) {
          console.log(s)
        });// 失足了

实例2：

        const thenable = {
          then(resolve, reject) {
            reject('失足了');
          }
        };
        //参数就是thenable
        Promise.reject(thenable)
        .catch(e => {
          console.log(e === thenable)
        })
        // true

上面代码中，Promise.reject要领的参数是一个thenable对象，实行今后，背面catch要领的参数不是reject抛出的“失足了”这个字符串，而是thenable对象。

2 加深Promise明白

Promises 赋予我们的就是在我们运用异步Callback时丧失的最主要的言语基石: return, throw 以及客栈。然则想要 promises 可以供应这些方便给你的条件是你晓得怎样准确的运用它们。

2.1 运用Promise.resolve()建立Promise对象

任何有能够 throw 同步非常的代码都是一个后续会致使险些没法调试非常的潜伏要素。然则假如你将一切代码都运用Promise.resolve() 封装，那末你老是可以在今后运用 catch() 来捕捉它。因而要领2要优于要领1。

要领1：

new Promise(function(resolve,reject){
    resolve(someSynchronousValue);
}).then(/*-------------*/);

要领2：

function somePromiseAPI() {
    return Promise.resolve().then(function(){
    doSomethinThatMayThrow();
    return ‘foo’;
}).then(/*------------*/);
}

2.2 catch() 与 then(null, …) 依据运用场景并不是完整等价

以下代码等价：

    somePromise().catch(function (err)){
    //handle error
    });
    //////////////////////////////////////
    somePromise().then(null, function(err)) {
    //handle error
    }

然则以下代码不等价：

    somePromise().then(function(){
        return someOtherPromise();
    }).catch(function(err){
        //error
    });
    ///////////////////////////////
    somePromise().then(function(){
        return someOtherPromise();
    },function(err){
        //error
    });

因而，当你运用 then(resolveHandler, rejectHandler) 这类情势时，rejectHandler 并不会捕捉由 resolveHandler 激发的非常。最好不运用then()的第二个参数，而是老是运用catch()，唯一破例是写一些异步的Mocha测试时，运用then()的第二个参数，愿望抛出用例的非常。

2.3 promises vs promises factories

当我们愿望实行一个个的实行一个 promises 序列，即相似 Promise.all() 然则并不是并行的实行一切 promises。你能够无邪的写下如许的代码：

        function executeSequentially(promise){
            var result = Promise.resolve();
            promises.forEach(function (promise)){
                result = result.then(promise);
            });
            return result;
        }

不幸的是，这份代码不会根据你的期望去实行，你传入 executeSequentially() 的 promises 依旧会并行实行。其泉源在于你所愿望的，实际上基础不是去实行一个 promises 序列。遵照 promises 范例，一旦一个 promise 被建立，它就被实行了。因而你实际上须要的是一个 promise factories 数组。
我晓得你在想什么：“这是哪一个见鬼的 Java 顺序猿，他为啥在说 factories？” 。实际上，一个 promises factory 是非常简朴的，它仅仅是一个可以返回 promise 的函数：

        function executeSequentially(promiseFactories){
            var result = Promise.resolve();
            promiseFactories,forEach(function (promiseFactory){
            result = result.then(promiseFactory)
        });
        return result;
        }
        function promiseFactory(){
            return somethingThatCreatesAPromise();
        }

为什么如许就可以了？这是因为一个 promise factory 在被实行之前并不会建立 promise。它就像一个 then 函数一样，而实际上，它们就是完整一样的东西。假如你检察上面的 executeSequentially() 函数，然后设想 myPromiseFactory 被包裹在 result.then(…) 当中，或许你脑中的小灯胆就会亮起。在此时此刻，关于 promise 你就算是悟道了。

2.4 promises 穿透

        Promise.resolve(‘foo’).then(Promise.resolve(‘bar’)).then(function(result){
        console.log(result);
        });

实行效果并不是是bar，而是foo，这是因为当then()接收非函数的参数时，会解释为then(null)，这就致使前一个Promise的效果穿透到下面一个Promise。准确的写法是在then()要领内部包括函数：

        Promise.resolve(‘foo’).then(function(){
        return Promise.resolve(‘bar’);
        }).then(function(result){
        console.log(result);
        });

2.5 Promise.all()

Promise.all()以一个Promise数组作为输入，返回一个新的Promise，特性在于它会并行实行数组中的每一个Promise，而且每一个Promise都返回后才返回效果数组，这就数组的异步版map/forEach要领。然则假如须要返回两个不相干的效果，运用Promise.all()可以发生两个不相干的数组效果；然则假如后一效果要依靠前一个效果发生，此时在Promise里运用嵌套也就可以的：

        getUserByName(‘bill’).then(function(user){
            return getUserAccountById(user.id);
        }).then(function (userAccount){
        /*-----------------*/
        });

或许在内部运用嵌套：

        getUserByName(‘bill’).then(function(user){
                return getUserAccountById(user.id).then(function(userAccount){
                    /*--------------------*/
                });
        });

遗忘运用catch：没人可以保证不失足，所以照样在末了加一个catch吧！

Q: 假定 doSomething() 和 doSomethingElse() 均返回 promises，下面的四种 promises 的区分是什么

        //1
        doSomething().then(function(){
            return doSomethingElse();
        }).then(finalHandler);
        // doSomething()返回一个Promise实例，然则后续的then要领里是一个匿名函数，该函数发生一个新的Promise实例并返回这个实例，因而finalHandler的参数就是这个实例的resolve返回值。
        doSomething
        /-----------------/
                    doSomethingElse(undefined)
                    /----------------------------------/
                                            finalHandler(reulstOfDoSomethingElse)
                                            /--------------------------------------------------/
        //2
        doSomething().then(function(){
            doSomethingElse();
        }).then(finalHandler);
        //doSomething()返回一个Promise实例，然则后续的then要领里是一个匿名函数，该函数发生一个新的Promise实例，然则因为这个函数没有返回值，因而finalHandler函数没有参数。
        doSomething
        /-----------------/
                    doSomethingElse(undefined)
                    /----------------------------------/
                    finalHandler(undefined)
                    /----------------------------------/
        
        //3
        doSomething().then(doSomethingElse())
        .then(finalHandler);
        // doSomething()返回一个Promise实例，然则后续的doSomethingElse()是一个马上实行函数，不接收上一Promise实例的resolve参数，所以参数是undefined，这时候doSomething()的Promise穿透到finalHandler，finalHandler的参数就是该Promise的resolve参数。
        doSomething
        /-----------------/
        doSomethingElse(undefined)
        /----------------------------------/
                                finalHandler(reulstOfDoSomething)
                                /--------------------------------------------------/
        
        //4
        doSomething().then(doSomethingElse)
        .then(finalHandler);
        //doSomething()返回一个Promise实例，随后挪用doSomethingElse以上一实例的resolve参数发生第二个Promise,末了是finalHandler以上一实例的resolve参数发生第三个Promise。
        doSomething
        /-----------------/
                    doSomethingElse(resultOfDoSomething)
                    /----------------------------------/
                                            finalHandler(reulstOfDoSomethingElse)
                                            /--------------------------------------------------/