兩年前端經(jīng)驗還不會手寫Promise？-魔扣目錄

什么是promise？

當(dāng)我們處理異步操作時，我們經(jīng)常需要進行一系列的操作，如請求數(shù)據(jù)、處理數(shù)據(jù)、渲染UI等。在過去，這些操作通常通過回調(diào)函數(shù)來處理，但是回調(diào)函數(shù)嵌套過多會導(dǎo)致代碼難以維護，產(chǎn)生回調(diào)地獄（Callback Hell）。Promise就是一種用于解決異步編程問題的解決方案。

概念？

Promise是一種代表異步操作最終完成或失敗的對象。它是ES6中新增的語法特性，通過Promise對象，可以更加優(yōu)雅地處理異步操作。Promise有三種狀態(tài)：pending（進行中）、fulfilled（已成功）和rejected（已失敗）。一旦Promise的狀態(tài)發(fā)生改變，就不會再變。

Promise的作用：

異步操作的管理： Promise提供了一種標(biāo)準(zhǔn)的方式來管理異步操作，使得代碼更加清晰易讀。
解決回調(diào)地獄問題： Promise的鏈?zhǔn)秸{(diào)用（ChAIning）可以避免多層嵌套的回調(diào)函數(shù)，使代碼結(jié)構(gòu)更加清晰。
錯誤處理： Promise提供了統(tǒng)一的錯誤處理機制，通過catch方法可以捕獲Promise鏈中的錯誤，避免了未捕獲的異常。
并行和串行執(zhí)行： Promise可以串行或并行執(zhí)行多個異步操作，并通過Promise.all和Promise.race等方法來管理多個Promise實例的狀態(tài)。

Promise的方法：

then(onFulfilled, onRejected): then方法用于注冊Promise的成功和失敗回調(diào)，并返回一個新的Promise，可以實現(xiàn)鏈?zhǔn)秸{(diào)用。
catch(onRejected): catch方法用于捕獲Promise鏈中的錯誤，并返回一個新的Promise，用于處理錯誤。
finally(onFinally): finally方法用于注冊一個回調(diào)函數(shù)，無論Promise的狀態(tài)如何都會被調(diào)用。
Promise.resolve(value): Promise.resolve方法用于將一個值包裝成Promise對象，如果參數(shù)是Promise實例，則直接返回該實例。
Promise.reject(reason): Promise.reject方法用于返回一個狀態(tài)為rejected的Promise對象，并將指定的原因傳遞給Promise的回調(diào)函數(shù)。
Promise.all(iterable): Promise.all方法用于將多個Promise實例包裝成一個新的Promise實例，當(dāng)所有Promise實例的狀態(tài)都變?yōu)閒ulfilled時，新的Promise的狀態(tài)才變?yōu)閒ulfilled；當(dāng)其中一個Promise實例的狀態(tài)變?yōu)閞ejected時，新的Promise的狀態(tài)就變?yōu)閞ejected。
Promise.race(iterable): Promise.race方法用于將多個Promise實例包裝成一個新的Promise實例，當(dāng)其中一個Promise實例的狀態(tài)發(fā)生改變時，新的Promise的狀態(tài)就跟著改變。
Promise.allSettled(iterable): Promise.allSettled方法用于將多個Promise實例包裝成一個新的Promise實例，無論這些Promise的狀態(tài)如何，最終返回的Promise實例的狀態(tài)都會變?yōu)閒ulfilled，返回的結(jié)果是一個包含所有Promise的狀態(tài)和結(jié)果的數(shù)組。

實現(xiàn)Promise的重點

如果要手寫Promise，那就需要先理清楚重點，然后實現(xiàn)主，要集中在以下幾個方面：

狀態(tài)管理： Promise有三種狀態(tài)：pending（進行中）、fulfilled（已成功）和rejected（已失敗）。在Promise的生命周期中，它會從pending狀態(tài)轉(zhuǎn)變?yōu)閒ulfilled或rejected狀態(tài)，一旦狀態(tài)改變就不可再變。狀態(tài)的變化由Promise的執(zhí)行器函數(shù)中的resolve和reject函數(shù)觸發(fā)。
鏈?zhǔn)秸{(diào)用： Promise允許通過then方法鏈?zhǔn)秸{(diào)用，每次調(diào)用then都會返回一個新的Promise實例，以實現(xiàn)更加靈活的異步操作。通過鏈?zhǔn)秸{(diào)用，可以串聯(lián)多個異步操作，并在每個操作完成后執(zhí)行特定的處理邏輯。
錯誤處理： Promise提供了catch方法用于捕獲Promise鏈中的錯誤。在Promise鏈中，如果某個Promise發(fā)生了rejected狀態(tài)，它會沿著鏈路向下傳遞，直到被catch方法捕獲到錯誤，或者如果沒有捕獲到錯誤，則會導(dǎo)致未捕獲的異常。
異步執(zhí)行： Promise的then方法中的回調(diào)函數(shù)會在當(dāng)前執(zhí)行棧執(zhí)行完成后，通過事件循環(huán)機制被放入下一個事件循環(huán)中執(zhí)行，這樣可以保證回調(diào)函數(shù)總是在當(dāng)前代碼執(zhí)行完成后執(zhí)行，從而實現(xiàn)異步操作。
解決回調(diào)地獄問題： Promise的鏈?zhǔn)秸{(diào)用可以解決回調(diào)地獄（Callback Hell）的問題，使得代碼更加清晰易讀。通過Promise，可以更加優(yōu)雅地處理多個異步操作的串行或并行執(zhí)行，避免了深度嵌套的回調(diào)函數(shù)。

實現(xiàn)Promise

在知道Promise的概念以及重點之后，我們來簡單實現(xiàn)一下：

class MyPromise {
  constructor(executor) {
    // 初始化Promise的狀態(tài)為pending
    this.state = 'pending';
    // 存儲Promise的成功值
    this.value = undefined;
    // 存儲Promise的失敗原因
    this.reason = undefined;
    // 存儲成功狀態(tài)下的回調(diào)函數(shù)數(shù)組
    this.onResolvedCallbacks = [];
    // 存儲失敗狀態(tài)下的回調(diào)函數(shù)數(shù)組
    this.onRejectedCallbacks = [];


    // 定義resolve函數(shù)，用于將Promise狀態(tài)從pending改變?yōu)閒ulfilled
    const resolve = value => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        // 執(zhí)行成功狀態(tài)下的回調(diào)函數(shù)數(shù)組中的每個回調(diào)函數(shù)
        this.onResolvedCallbacks.forEach(callback => callback());
      }
    };


    // 定義reject函數(shù)，用于將Promise狀態(tài)從pending改變?yōu)閞ejected
    const reject = reason => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        // 執(zhí)行失敗狀態(tài)下的回調(diào)函數(shù)數(shù)組中的每個回調(diào)函數(shù)
        this.onRejectedCallbacks.forEach(callback => callback());
      }
    };


    try {
      // 執(zhí)行executor函數(shù)，并將resolve和reject函數(shù)作為參數(shù)傳遞給executor
      executor(resolve, reject);
    } catch (error) {
      // 如果executor執(zhí)行過程中發(fā)生了錯誤，則將Promise狀態(tài)改變?yōu)閞ejected
      reject(error);
    }
  }


  // then方法用于注冊Promise的成功和失敗回調(diào)，并返回一個新的Promise
  then(onFulfilled, onRejected) {
    // 創(chuàng)建一個新的Promise實例
    const newPromise = new MyPromise((resolve, reject) => {
      // 當(dāng)前Promise的狀態(tài)為fulfilled時
      if (this.state === 'fulfilled') {
        // 異步執(zhí)行onFulfilled回調(diào)函數(shù)，并處理返回值result
        setTimeout(() => {
          try {
            const result = onFulfilled(this.value);
            // 將返回值result傳遞給resolvePromise函數(shù)，處理新Promise的狀態(tài)
            resolvePromise(newPromise, result, resolve, reject);
          } catch (error) {
            // 如果執(zhí)行onFulfilled回調(diào)函數(shù)過程中發(fā)生了錯誤，則將新Promise的狀態(tài)改為rejected
            reject(error);
          }
        }, 0);
      }


      // 當(dāng)前Promise的狀態(tài)為rejected時
      if (this.state === 'rejected') {
        // 異步執(zhí)行onRejected回調(diào)函數(shù)，并處理返回值result
        setTimeout(() => {
          try {
            const result = onRejected(this.reason);
            // 將返回值result傳遞給resolvePromise函數(shù)，處理新Promise的狀態(tài)
            resolvePromise(newPromise, result, resolve, reject);
          } catch (error) {
            // 如果執(zhí)行onRejected回調(diào)函數(shù)過程中發(fā)生了錯誤，則將新Promise的狀態(tài)改為rejected
            reject(error);
          }
        }, 0);
      }


      // 當(dāng)前Promise的狀態(tài)為pending時
      if (this.state === 'pending') {
        // 將成功和失敗回調(diào)函數(shù)分別添加到對應(yīng)的回調(diào)函數(shù)數(shù)組中
        this.onResolvedCallbacks.push(() => {
          // 異步執(zhí)行成功回調(diào)函數(shù)，并處理返回值result
          setTimeout(() => {
            try {
              const result = onFulfilled(this.value);
              // 將返回值result傳遞給resolvePromise函數(shù)，處理新Promise的狀態(tài)
              resolvePromise(newPromise, result, resolve, reject);
            } catch (error) {
              // 如果執(zhí)行成功回調(diào)函數(shù)過程中發(fā)生了錯誤，則將新Promise的狀態(tài)改為rejected
              reject(error);
            }
          }, 0);
        });


        this.onRejectedCallbacks.push(() => {
          // 異步執(zhí)行失敗回調(diào)函數(shù)，并處理返回值result
          setTimeout(() => {
            try {
              const result = onRejected(this.reason);
              // 將返回值result傳遞給resolvePromise函數(shù)，處理新Promise的狀態(tài)
              resolvePromise(newPromise, result, resolve, reject);
            } catch (error) {
              // 如果執(zhí)行失敗回調(diào)函數(shù)過程中發(fā)生了錯誤，則將新Promise的狀態(tài)改為rejected
              reject(error);
            }
          }, 0);
        });
      }
    });


    // 返回新的Promise實例
    return newPromise;
  }
}


// resolvePromise函數(shù)用于處理then方法中回調(diào)函數(shù)返回的結(jié)果
function resolvePromise(newPromise, result, resolve, reject) {
  // 如果新的Promise和返回值是同一個對象，則拋出錯誤
  if (newPromise === result) {
    return reject(new TypeError('Chaining cycle detected for promise'));
  }


  // 如果返回值是Promise實例，則等待該Promise的狀態(tài)改變，并根據(jù)其狀態(tài)決定新Promise的狀態(tài)
  if (result instanceof MyPromise) {
    result.then(resolve, reject);
  } else {
    // 如果返回值不是Promise實例，則將返回值傳遞給resolve函數(shù)，將新Promise的狀態(tài)改變?yōu)閒ulfilled
    resolve(result);
  }
}

這段代碼實現(xiàn)了一個非常基礎(chǔ)的Promise，主要有以下幾個部分：

構(gòu)造函數(shù)：

構(gòu)造函數(shù)接受一個執(zhí)行器函數(shù)作為參數(shù)，在構(gòu)造函數(shù)內(nèi)部定義了resolve和reject函數(shù)，并執(zhí)行了執(zhí)行器函數(shù)。執(zhí)行器函數(shù)接受兩個參數(shù)，分別是resolve和reject，它們分別用于將Promise狀態(tài)從pending改變?yōu)閒ulfilled和rejected。

執(zhí)行器函數(shù)中通過try...catch塊捕獲可能的異常，并在捕獲到異常時將Promise狀態(tài)改變?yōu)閞ejected。