Promise原理分析二

OnlyMyRailgun 發(fā)布于2019-08-20 12:11 / 3053人閱讀

摘要：原理分析一說明方法返回一個(gè)被拒絕的對象。實(shí)現(xiàn)創(chuàng)建一個(gè)新的對象，通過其構(gòu)造函數(shù)的參數(shù)函數(shù)對象將狀態(tài)變?yōu)椤：褪褂媒馕鲋担瑫r(shí)通過構(gòu)造函數(shù)的參數(shù)的函數(shù)對象觸發(fā)的狀態(tài)轉(zhuǎn)變，其中使用數(shù)組記錄返回值使用索引值以確保其返回值在結(jié)果集中的順序。

Promise原理分析二

前面我們分析了Promise的then和catch方法，接下來我們一起來看看reject、resolve、race和all方法的實(shí)現(xiàn)。

Note:

Promise原理分析一

reject 說明

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

語法

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

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

參數(shù)

name	desc
reason	被拒絕的原因。

實(shí)現(xiàn)

創(chuàng)建一個(gè)新的Promise對象，通過其構(gòu)造函數(shù)的參數(shù)reject函數(shù)對象將狀態(tài)變?yōu)?b>rejected。

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

resolve 說明

Promise.resolve(value)方法返回一個(gè)以給定值解析后的Promise對象。但如果這個(gè)值是個(gè)Promise對象，返回的Promise會(huì)采用它的最終狀態(tài)；否則以該值為成功狀態(tài)返回promise對象。

語法

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

參數(shù)

name	desc
value	用來解析待返回Promise對象的參數(shù)。（可以是一個(gè)Promise對象）

實(shí)現(xiàn)

如果是一個(gè)Promise對象，直接返回該值；否則創(chuàng)建一個(gè)新的Promise對象，通過其構(gòu)造函數(shù)的參數(shù)resolve函數(shù)對象將狀態(tài)變?yōu)?b>fulfilled。

static resolve(value) {
  // 如果為Promise對象，直接返回當(dāng)前值
  if (value instanceof Promise) {
    return value;
  }

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

race 說明

Promise.race(values)返回一個(gè)Promise對象，這個(gè)Promise在values中的任意一個(gè)Promise被解決或拒絕后，立刻以相同的解決值被解決或以相同的拒絕原因被拒絕。

語法

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

參數(shù)

name	desc
values	一個(gè)Array對象。

實(shí)現(xiàn)

使用Promise.resolve對迭代對象值進(jìn)行解析，且將新Promise的參數(shù)resolve和reject函數(shù)對象傳遞給then方法，以觸發(fā)新Promise對象的狀態(tài)轉(zhuǎn)換。

static race(values) {
  // 校驗(yàn)values參數(shù)是否為數(shù)組
  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)方法返回一個(gè)Promise對象，該P(yáng)romise會(huì)等values參數(shù)內(nèi)的所有值都被resolve后才被resolve，或以values參數(shù)內(nèi)的第一個(gè)被reject的原因而被reject。

語法

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

參數(shù)

name	desc
values	一個(gè)Array對象。

實(shí)現(xiàn)

通過Promise.resolve對迭代對象值進(jìn)行解析，使用數(shù)組記錄values參數(shù)的所有值被解析后的結(jié)果，當(dāng)所有值解析后resolve，并傳遞其所有解析結(jié)果。同時(shí)傳遞reject函數(shù)對象給Promise.resolve().then參數(shù)，以觸發(fā)新Promise對象的狀態(tài)轉(zhuǎn)換。

static all(values) {
  // 校驗(yàn)values參數(shù)是否為數(shù)組
  if (!isArray(values)) {
    return Promise.reject(new Error("Promise.all must be provided an Array"));
  }

  return new Promise((resolve, reject) => {
    // 如果數(shù)組長度為0，直接resolve且結(jié)束處理
    if (values.length === 0) {
      resolve([]);
      return;
    }

    const len = values.length;
    // 創(chuàng)建一個(gè)數(shù)組用來保存values的Promise返回值
    const result = new Array(len);
    let remaining = len;

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

        // 當(dāng)values的所有值都解析完后，調(diào)用新Promise對象的resolve函數(shù)方法，
        // 把所有返回值result傳遞給后續(xù)處理中，且將狀態(tài)轉(zhuǎn)換為fulfilled。
        if (--remaining === 0) {
          resolve(result);
        }
      }, reject);
    }

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

總結(jié)

Promise.reject和Promise.resolve通過Promise的構(gòu)造函數(shù)實(shí)現(xiàn)狀態(tài)轉(zhuǎn)變。

Promise.race和Promise.all使用Promise.resolve解析values值，同時(shí)通過構(gòu)造函數(shù)的executor參數(shù)的函數(shù)對象觸發(fā)Promise的狀態(tài)轉(zhuǎn)變，其中Promise.all使用數(shù)組記錄返回值、使用索引值以確保其返回值在結(jié)果集中的順序。

關(guān)鍵知識(shí)點(diǎn)

Promise

MDN

資源 完整代碼