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/