深入探究JavaScript Promise原理

一、Promise基本介紹

Promise從ES6開始被加入到了JavaScript中，是一種處理異步編程的新思路，用於解決傳統回調函數帶來的回調層數嵌套問題，是一種更加優雅的方式來處理異步流程。Promise可以看作是一個容器，裡面保存着未來會被處理的異步操作的結果，可以通過then方法來獲取異步操作的結果或處理異步操作失敗的情況。

二、Promise的基本使用

基本的Promise使用方式如下所示：

  
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const result = '成功！';
    resolve(result);
  }, 1000);
});

promise.then(result => {
  console.log(result); // 成功！
}).catch(error => {
  console.log(error);
});

在上面的示例中，Promise通過構造函數來創建，resolve函數表示Promise對象中異步操作成功完成時的處理函數，reject函數表示異步操作失敗時的處理函數，then函數表示對異步操作成功時的處理，catch函數表示對異步操作失敗時的處理。

三、Promise的特點

Promise的特點有以下幾個方面：

不可逆：Promise一旦進入resolved或rejected狀態後，便無法再次改變狀態。
鏈式調用：then和catch方法返回的是另一個Promise對象，因此可以實現鏈式調用。
延遲綁定：Promise的then和catch方法會返回一個新的Promise對象，在後面的then和catch中可以再次綁定新的處理函數。
處理並行異步操作：Promise.all方法可以處理多個異步操作，當所有操作都成功後才返回結果。
處理多個異步操作中的任意一個：Promise.race方法會在任何一個異步操作完成時返回結果。

四、Promise內部實現原理

Promise的內部實現原理可以分為以下三個方面：狀態管理、隊列管理和錯誤處理。

1、狀態管理

Promise內部需要管理三種狀態：Pending、Resolved（Fulfilled）和Rejected。當Promise被創建後，初始狀態為Pending。當異步操作狀態變為成功時，Promise狀態會轉換為Resolved，Promise對象狀態變為Rejected則代表異步操作失敗。因為Promise狀態不可逆，所以一旦狀態變為Resolved或Rejected，Promise實例便不可再被修改。

Promise內部的狀態管理可以使用一個變量來代表Promise狀態，比如下面的示例：

  
class MyPromise {
  constructor(task) {
    this.status = 'Pending';
    task(this.resolve.bind(this), this.reject.bind(this));
  }
  
  resolve() {
    this.status = 'Resolved';
  }
  
  reject() {
    this.status = 'Rejected';
  }
}

2、隊列管理

Promise在內部也需要管理兩個隊列：FulfilledQueue和RejectedQueue，這裡可以使用一個數組來保存。如果異步操作的狀態為Resolved，可以從FulfilledQueue中獲取then方法註冊的回調函數執行；如果異步操作的狀態為Rejected，則可以從RejectedQueue中獲取catch方法註冊的回調函數執行。由於Promise的鏈式調用，每次then操作會返回一個新的Promise實例，因此需要將FulfilledQueue和RejectedQueue繼承到新的Promise實例中。

下面是Promise內部隊列管理的簡單實現：

  
class MyPromise {
  constructor(task) {
    this.status = 'Pending';
    this.fulfilledQueue = [];
    this.rejectedQueue = [];
    task(this.resolve.bind(this), this.reject.bind(this));
  }
  
  then(onFulfilled) {
    this.fulfilledQueue.push(onFulfilled);
    return new MyPromise(() => {});
  }
  
  catch(onRejected) {
    this.rejectedQueue.push(onRejected);
    return new MyPromise(() => {});
  }
  
  resolve() {
    this.status = 'Resolved';
    this.fulfilledQueue.forEach(fn => fn());
  }
  
  reject() {
    this.status = 'Rejected';
    this.rejectedQueue.forEach(fn => fn());
  }
}

const promise = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功！');
  }, 1000);
});

promise.then(result => {
  console.log(result); // 成功！
});

3、錯誤處理

在Promise中，錯誤可以通過調用reject方法來處理，並將錯誤信息傳遞給catch方法進行處理。在Promise中，如果一個Promise對象沒有被任何then或catch方法所處理，錯誤信息會被靜默丟失。因此，意外的錯誤應該總是被從Promise鏈中提取出來，並處理掉，否則會對整個系統造成很大的危害。

下面是一個錯誤的Promise示例：

  
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    // 這裡沒有調用reject函數處理錯誤
    const result = '成功！';
    resolve(result);
  }, 1000);
});

promise.then(result => {
  console.log(result); // 成功！
});

在上面的示例中，如果異步操作失敗，所有的錯誤信息都會被靜默丟失，並且後續的其他操作都不會收到任何錯誤信息。正確的做法應該是在Promise中加入錯誤處理函數，當異步操作失敗時會調用reject函數，通過catch方法獲取到錯誤信息並進行處理。

下面是一個正確的Promise示例：

  
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (Math.random()  {
  console.log(result); // 成功！
}).catch(error => {
  console.log(error); // 失敗！
});

五、Promise原理的應用

Promise原理在實際的應用中也是非常廣泛的。比如jQuery中的ajax請求就是基於Promise進行封裝的，可以使用Promise的then和catch方法進行回調處理。另外，一些流行的框架如Vue.js和AngularJS也都內置了Promise功能，並且可以通過鏈式調用方便地進行異步操作。

下面是一個基於Promise的ajax請求示例：

  
function ajax(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(xhr.responseText);
        } else {
          reject(xhr.statusText);
        }
      }
    };
    xhr.open('GET', url, true);
    xhr.send(null);
  });
}

ajax('https://jsonplaceholder.typicode.com/todos/1').then(result => {
  console.log(result);
}).catch(error => {
  console.log(error);
});

六、總結

本文對Promise的基本概念、基本使用、特點、內部實現原理以及應用進行了詳細的闡述。Promise的鏈式調用和錯誤處理功能可以方便地解決異步編程過程中的問題，因此在實際應用中應該選擇Promise以便更加便捷地實現異步編程。同時，在使用Promise時也需要注意一些問題，比如錯誤處理和狀態管理，以便更加完善地使用Promise。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/235664.html