JavaScript:理解Promise方法

什么是promise？

Promise的核心思想是代表异步操作的一个结果，并且promise具有三个状态(pending初始状态,fulfilled成功状态,rejected失败状态)。我们可以理解为使用promise可以实现非阻塞io的功能，根据三个不同的状态，我们可以知道回调函数实现在哪个过程。

Promise.prototype.then

源码分析：

 this.then = function(onFulfilled) {
     if (typeof onFulfilled !== "function") return this;
     return new Promise(function(resolve, reject) {
       asap(function() {
         try {
           resolve(onFulfilled(value));
         } catch (ex) {
           reject(ex);
         }
       });
     });
 };
 
 this.then = function(onFulfilled, onRejected) {
     return new self.constructor(function(resolve, reject) {
       handle(new Handler(onFulfilled, onRejected, resolve, reject));
     });
 };
 
 ValuePromise.prototype = Promise.prototype;

　　我们知道.then先是以对象的属性实现的方法，随后是以继承的方式实现的方法，所以then方法可以具有一个参数.then(onFulfilled)，又可具有二个参数.then(onFulfilled,onRejected)，第一个参数为操作成功的回调函数，并且第二个参数是操作失败的回调函数，然后从上面的handle方法可以看出then的二个参数以数组对象的形式保存在一个队列(deferreds)里面，然后从队列里面处理then方法。

.then链式调用

例子(略由于非链式每次都是promise迭代而已)：

 // 新建一个返回promise对象的函数
 var p1 = function constructorpromise (a) {
   return new Promise(function(resolve, reject) {
       resolve(1)
   });
 }
 
 // 实现链式调用
 var con = constructorpromise(2)
 con
 .then(function(a) {
   var second = document.getElementsByClassName('part-second')[0]
   second.innerText = a
   return a + 2
 })
 .then(function(b) {
   var first = document.getElementsByClassName('part-first')[0]
   first.innerText = b
 })

　　注意以上有二个then方法实现的回调，第一个then方法调用传参是从promise中resolve回调传入的参数值1，第二个then方法调用传参是上一个then方法内部return传递下来的值3（return a +２），因此第二个then参数获得的结果为３。（切记：如果是链式调用then，那么从第二个then开始的参数都是从上一个then的返回的结果，如果上一个then没有return，那么下一个then的参数为undefined）

Promise.all()

源码分析：

 Promise.all = function(arr) {
       var args = Array.prototype.slice.call(arr);
       return new Promise(function(resolve, reject) {
         if (args.length === 0) return resolve([]);
         var remaining = args.length;
         function res(i, val) {
           try {
             if (val && (typeof val === "object" || typeof val === "function")) {
               var then = val.then;
               if (typeof then === "function") {
                 then.call(val, function(val) {
                   res(i, val);
                 }, reject);
                 return;
               }
             }
             args[i] = val;
             if (--remaining === 0) {
               resolve(args);
             }
           } catch (ex) {
             reject(ex);
           }
         }
         for (var i = 0; i < args.length; i++) {
           res(i, args[i]);
         }
       });
     };

　　从以上可以看出，当all的方法内参数为空时(args.length === 0)，就会返回一个resolve方法的迭代对象。如果不为空，且all方法的数组上也不是promise时，那么就会输出值args[i] = val;也就是说返回初始值pending。如果all方法的数组项是promise时，就会回调resolve()并返回每一项的结果。

例子：

 var promise = Promise.resolve(3);
 Promise.all([true, promise]).then(values => {
   console.log(values); // [true, 3]
 });

Promise.race([])

源码分析：

 Promise.race = function(values) {
   return new Promise(function(resolve, reject) {
     values.forEach(function(value) {
       Promise.resolve(value).then(resolve, reject);
     });
   });
 };

　　其实.race方法内部的数组每一项如果都用promise的resolve方法实现的迭代，那么数组内每一项promise的状态都会发生改变，就像race英文的意思"赛跑,竞争"，表示promise哪一项先执行resolve回调，哪一项promise就会先执行回调函数并返回resolve结果。

例子：

 var p1 = new Promise(function(resolve, reject) {
   setTimeout(resolve, 500, "one");
 });
 var p2 = new Promise(function(resolve, reject) {
   setTimeout(resolve, 100, "two");
 });
 
 Promise.race([p1, p2]).then(function(value) {
   console.log(value); // "two"
   // Both resolve, but p2 is faster
 });

参考：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise#参见

https://segmentfault.com/a/1190000007032448#articleHeader10

https://www.promisejs.org/api/