摘要：源碼學(xué)習(xí)本篇為上一篇源碼學(xué)習(xí)的補(bǔ)充，主要是來介紹和方法。那個(gè)率先改變的實(shí)例的返回值，就傳遞給的回調(diào)函數(shù)?；窘榻B可見阮一峰老師的書籍。的狀態(tài)由決定，分成兩種情況。只有的狀態(tài)都變成，的狀態(tài)才會(huì)變成，此時(shí)的返回值組成一個(gè)數(shù)組，傳遞給的回調(diào)函數(shù)。

本篇為上一篇源碼學(xué)習(xí)（1）的補(bǔ)充，主要是來介紹Promise.all()和Promise.race()方法。
閑話少敘，進(jìn)入正題

首先來簡單介紹一下功能吧，詳細(xì)比如可見阮一峰老師的ES6書籍。
Promise.race方法是將多個(gè) Promise 實(shí)例，包裝成一個(gè)新的 Promise 實(shí)例。

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

上面代碼中，只要p1、p2、p3之中有一個(gè)實(shí)例率先改變狀態(tài)，p的狀態(tài)就跟著改變。那個(gè)率先改變的 Promise 實(shí)例的返回值，就傳遞給p的回調(diào)函數(shù)。
接下來貼源代碼

export default function race (entries) {
  /*jshint validthis:true */
  let Constructor = this;

  if (!isArray(entries)) {
    return new Constructor((_resolve, reject) => reject(new TypeError("You must pass an array to race.")));
  } else {
    return new Constructor((resolve, reject) => {//new 執(zhí)行一次
      let length = entries.length;
      for (let i = 0; i < length; i++) {//執(zhí)行每一個(gè)傳入的entry 但只有最快的一個(gè)能resolve或reject改變返回的promise的狀態(tài)
        Constructor.resolve(entries[i]).then(resolve, reject);
      }
    });
  }
}
//isArray定義：
if (Array.isArray) {
  _isArray = Array.isArray;
} else {
  _isArray = x => Object.prototype.toString.call(x) === "[object Array]";
}

如果傳入的參數(shù)不是數(shù)據(jù)直接reject。
如果是數(shù)組，則依次resolve傳入的thenable對(duì)象并在then中注冊(cè)回調(diào)，設(shè)Promise.race()返回的新Promise的對(duì)象為p的話，最快執(zhí)行完成的entry進(jìn)入then回調(diào)，執(zhí)行resolve或reject，以此來改變新對(duì)象p的狀態(tài)。之后的entry完成在此執(zhí)行resolve或reject均無效，因?yàn)镻romise狀態(tài)一旦確定無法改變，詳見上篇關(guān)于fulfill()和reject()的注釋和分析。

基本介紹可見阮一峰老師的ES6書籍。
Promise.all方法用于將多個(gè) Promise 實(shí)例，包裝成一個(gè)新的 Promise 實(shí)例。

const p = Promise.all([p1, p2, p3]);

p的狀態(tài)由p1、p2、p3決定，分成兩種情況。
（1）只有p1、p2、p3的狀態(tài)都變成fulfilled，p的狀態(tài)才會(huì)變成fulfilled，此時(shí)p1、p2、p3的返回值組成一個(gè)數(shù)組，傳遞給p的回調(diào)函數(shù)。
（2）只要p1、p2、p3之中有一個(gè)被rejected，p的狀態(tài)就變成rejected，此時(shí)第一個(gè)被reject的實(shí)例的返回值，會(huì)傳遞給p的回調(diào)函數(shù)。
源碼：

export default function all(entries) {
  return new Enumerator(this, entries).promise;//這里返回了一個(gè)新對(duì)象Promise
}

這里注意返回了一個(gè)新的Promise對(duì)象.
Enumerator源碼如下

export default class Enumerator {
  constructor (Constructor, input) {
    this._instanceConstructor = Constructor;
    //Promise.all([...])會(huì)返回一個(gè)新的promise
    this.promise = new Constructor(noop);

    if (!this.promise[PROMISE_ID]) {
      makePromise(this.promise);
    }

    if (isArray(input)) {
      this.length = input.length;
      this._remaining = input.length;//未完成的promise總數(shù)量

      this._result = new Array(this.length);//每個(gè)promise結(jié)果

      if (this.length === 0) {
        fulfill(this.promise, this._result);
      } else {
        this.length = this.length || 0;
        this._enumerate(input);//處理輸入的數(shù)組
        if (this._remaining === 0) {//都執(zhí)行完畢
          fulfill(this.promise, this._result);
        }
      }
    } else {
      reject(this.promise, validationError());//傳入不是array， reject it
    }
  }

  _enumerate (input) {
    for (let i = 0; this._state === PENDING && i < input.length; i++) {//Enumerator _state？？ TODO
      this._eachEntry(input[i], i);
    }
  }

  //處理所有的輸入
  _eachEntry (entry, i) {
    let c = this._instanceConstructor;//Promise
    let {resolve} = c;//Promise.resolve

    if (resolve === originalResolve) {
      let then = getThen(entry);//獲取then方法

      if (then === originalThen &&
        entry._state !== PENDING) {//如果entry已完成或已拒絕
        this._settledAt(entry._state, i, entry._result);
      } else if (typeof then !== "function") {
        this._remaining--;//不是thenable 直接完成該entry
        this._result[i] = entry;
      } else if (c === Promise) {//不是promise但是一個(gè)thenable
        let promise = new c(noop);
        handleMaybeThenable(promise, entry, then);
        this._willSettleAt(promise, i);//暫時(shí)狀態(tài)不確定，訂閱之
      } else {
        this._willSettleAt(new c(resolve => resolve(entry)), i);
      }
    } else {
      this._willSettleAt(resolve(entry), i);
    }
  }

  _settledAt (state, i, value) {
    let {promise} = this;

    if (promise._state === PENDING) {
      this._remaining--;//該entry狀態(tài)已確定，待完成總數(shù)減一

      if (state === REJECTED) {
        reject(promise, value);//如果傳入entry列表有一個(gè)rejected，立即設(shè)置promise結(jié)果rejected
      } else {
        this._result[i] = value;
      }
    }

    if (this._remaining === 0) {//全部處理完成fulfill
      fulfill(promise, this._result);
    }
  }

  _willSettleAt (promise, i) {
    let enumerator = this;
    //暫時(shí)狀態(tài)不定，訂閱之
    subscribe(
      promise, undefined,
      value => enumerator._settledAt(FULFILLED, i, value),//回調(diào)，設(shè)置promise狀態(tài)
      reason => enumerator._settledAt(REJECTED, i, reason)
    );
  }
};

代碼不是很多，在此就不逐個(gè)方法貼了。
首先看Constructor，細(xì)節(jié)不表，如果傳入了一個(gè)thenable數(shù)組會(huì)在_enumerate方法中通過_eachEntry挨個(gè)處理，細(xì)節(jié)見注釋。
總體思路就是對(duì)傳入列表的元素挨個(gè)處理，該resolve則resolve，同時(shí)通過_remaining 對(duì)未完成的entry進(jìn)行計(jì)數(shù)。
若entry是pending狀態(tài)，則通過_willSettleAt來訂閱，有確定結(jié)果時(shí)進(jìn)行 _settledAt；
若entry已完成，直接_settledAt確定結(jié)果；
當(dāng)_remaining === 0;也就是列表所有entry均已有結(jié)果，設(shè)置Promise.all()返回的新Promise對(duì)象的狀態(tài)。
要注意，如果有一個(gè)entry被reject了，會(huì)直接設(shè)置 新Promise對(duì)象的狀態(tài)為rejected。

該圖對(duì)Promise的流程總結(jié)。
總的來說，Promise通過鏈?zhǔn)秸Z法使得異步操作更加的直觀，避免了回調(diào)地獄的出現(xiàn)。使得代碼更加易讀可維護(hù)。
細(xì)節(jié)可見源碼上的注釋，全部代碼可見es6-promise學(xué)習(xí)筆記

明后兩天公司集體出游，沒有大多的時(shí)間來打磨，可是自己又定了一個(gè)每周一篇學(xué)習(xí)總結(jié)小文章的目標(biāo)，所以擠些時(shí)間提前寫完這篇文章來完成目標(biāo)吧。繼續(xù)加油吧！