Promise原理分析二

Promise原理分析二

前面咱們分析了Promise的then和catch方法，接下來咱們一塊兒來看看reject、resolve、race和all方法的實現。

Note:

Promise原理分析一

reject

說明

Promise.reject(reason)方法返回一個被拒絕的Promise對象。

語法

Promise.reject(new Error('something wrong')).then(null, err => {
  // todo
});

Promise.reject(new Error('something wrong')).catch(err => {
  // todo
});

參數

name	desc
reason	被拒絕的緣由。

實現

建立一個新的Promise對象，經過其構造函數的參數reject函數對象將狀態變爲rejected。

static reject(reason) {
  return new Promise((resovle, reject) => {
    reject(reason);
  });
}

resolve

說明

Promise.resolve(value)方法返回一個以給定值解析後的Promise對象。但若是這個值是個Promise對象，返回的Promise會採用它的最終狀態；不然以該值爲成功狀態返回promise對象。

語法

Promise.resolve(1000).then(value => {
  // todo
});

參數

name	desc
value	用來解析待返回Promise對象的參數。（能夠是一個Promise對象）

實現

若是是一個Promise對象，直接返回該值；不然建立一個新的Promise對象，經過其構造函數的參數resolve函數對象將狀態變爲fulfilled。

static resolve(value) {
  // 若是爲Promise對象，直接返回當前值
  if (value instanceof Promise) {
    return value;
  }

  return new Promise(resovle => {
    resovle(value);
  });
}

race

說明

Promise.race(values)返回一個Promise對象，這個Promise在values中的任意一個Promise被解決或拒絕後，馬上以相同的解決值被解決或以相同的拒絕緣由被拒絕。

語法

Promise.race([p1, p2]).then(value => {
  // todo
}, reason => {
  // todo
});

參數

name	desc
values	一個Array對象。

實現

使用Promise.resolve對迭代對象值進行解析，且將新Promise的參數resolve和reject函數對象傳遞給then方法，以觸發新Promise對象的狀態轉換。

static race(values) {
  // 校驗values參數是否爲數組
  if (!isArray(values)) {
    return Promise.reject(new Error('Promise.race must be provided an Array'));
  }

  return new Promise((resovle, reject) => {
    values.forEach(value => {  // 遍歷迭代對象
      // 使用Promise.resolve解析value值（可能爲Promise對象或其餘值）
      // 將新Promise對象的resolve, reject傳遞給解析後的Promise.prototype.then
      Promise.resolve(value).then(resovle, reject);
    });
  });
}

all

說明

Promise.all(values)方法返回一個Promise對象，該Promise會等values參數內的全部值都被resolve後才被resolve，或以values參數內的第一個被reject的緣由而被reject。

語法

Promise.all([p1, p2]).then(values => {
  // todo
});

參數

name	desc
values	一個Array對象。

實現

經過Promise.resolve對迭代對象值進行解析，使用數組記錄values參數的全部值被解析後的結果，當全部值解析後resolve，並傳遞其全部解析結果。同時傳遞reject函數對象給Promise.resolve().then參數，以觸發新Promise對象的狀態轉換。

static all(values) {
  // 校驗values參數是否爲數組
  if (!isArray(values)) {
    return Promise.reject(new Error('Promise.all must be provided an Array'));
  }

  return new Promise((resolve, reject) => {
    // 若是數組長度爲0，直接resolve且結束處理
    if (values.length === 0) {
      resolve([]);
      return;
    }

    const len = values.length;
    // 建立一個數組用來保存values的Promise返回值
    const result = new Array(len);
    let remaining = len;

    // 處理values數組中的值
    function doResolve(index, value) {
      Promise.resolve(value).then(val => {
        // 將解析後的Promise返回值保存在對應索引的結果集中
        result[index] = val;

        // 當values的全部值都解析完後，調用新Promise對象的resolve函數方法，
        // 把全部返回值result傳遞給後續處理中，且將狀態轉換爲fulfilled。
        if (--remaining === 0) {
          resolve(result);
        }
      }, reject);
    }

    // 迭代values對象，傳遞其索引位置以確保結果值的順序
    for (let i = 0; i < len; i++) {
      doResolve(i, values[i]);
    }
  });
}

總結

Promise.reject和Promise.resolve經過Promise的構造函數實現狀態轉變。

Promise.race和Promise.all使用Promise.resolve解析values值，同時經過構造函數的executor參數的函數對象觸發Promise的狀態轉變，其中Promise.all使用數組記錄返回值、使用索引值以確保其返回值在結果集中的順序。

關鍵知識點

Promise

MDN

資源

完整代碼