2.1 Pending狀態

當一個Promise對象被創建時，它處于Pending狀態。這意味著異步操作尚未完成，結果還未確定。在這個狀態下，Promise對象可以轉換為Fulfilled或Rejected狀態。

const promise = new Promise((resolve, reject) => {
  // 異步操作
  setTimeout(() => {
    resolve('操作成功');
  }, 1000);
});

console.log(promise); // Promise { <pending> }

2.2 Fulfilled狀態

當異步操作成功完成時，Promise對象會從Pending狀態轉換為Fulfilled狀態。此時，Promise對象的值被設置為操作的結果。

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

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

2.3 Rejected狀態

當異步操作失敗時，Promise對象會從Pending狀態轉換為Rejected狀態。此時，Promise對象的值被設置為錯誤信息。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('操作失敗');
  }, 1000);
});

promise.catch((error) => {
  console.log(error); // 操作失敗
});

3. 異步請求的狀態管理

在實際開發中，我們經常需要處理多個異步請求，并根據它們的狀態來決定下一步操作。ES6提供了多種方法來管理異步請求的狀態。

3.1 Promise鏈式調用

Promise對象支持鏈式調用，這使得我們可以將多個異步操作串聯起來，依次執行。

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('第一步完成');
  }, 1000);
});

const promise2 = (result) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(result + '，第二步完成');
    }, 1000);
  });
};

promise1
  .then(promise2)
  .then((result) => {
    console.log(result); // 第一步完成，第二步完成
  })
  .catch((error) => {
    console.log(error);
  });

3.2 Promise.all

Promise.all方法用于將多個Promise對象包裝成一個新的Promise對象。只有當所有的Promise對象都成功時，新的Promise對象才會成功；如果其中任何一個Promise對象失敗，新的Promise對象就會失敗。

const promise1 = Promise.resolve('第一步完成');
const promise2 = Promise.resolve('第二步完成');
const promise3 = Promise.reject('第三步失敗');

Promise.all([promise1, promise2])
  .then((results) => {
    console.log(results); // ['第一步完成', '第二步完成']
  })
  .catch((error) => {
    console.log(error);
  });

Promise.all([promise1, promise2, promise3])
  .then((results) => {
    console.log(results);
  })
  .catch((error) => {
    console.log(error); // 第三步失敗
  });

3.3 Promise.race

Promise.race方法用于將多個Promise對象包裝成一個新的Promise對象。新的Promise對象的狀態取決于最先完成的Promise對象的狀態。

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('第一步完成');
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('第二步失敗');
  }, 500);
});

Promise.race([promise1, promise2])
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.log(error); // 第二步失敗
  });

4. 異步請求的錯誤處理

在異步請求中，錯誤處理是非常重要的。ES6提供了多種方法來捕獲和處理異步請求中的錯誤。

4.1 catch方法

catch方法用于捕獲Promise對象中的錯誤。它相當于then(null, rejection)的簡寫形式。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('操作失敗');
  }, 1000);
});

promise
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.log(error); // 操作失敗
  });

4.2 finally方法

finally方法用于指定無論Promise對象最終狀態如何，都會執行的操作。它通常用于清理資源或執行一些收尾工作。

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

promise
  .then((result) => {
    console.log(result); // 操作成功
  })
  .catch((error) => {
    console.log(error);
  })
  .finally(() => {
    console.log('操作完成');
  });

5. 總結

ES6通過Promise對象為異步請求提供了強大的狀態管理能力。通過理解Promise的三種狀態（Pending、Fulfilled、Rejected），我們可以更好地控制異步操作的流程。此外，ES6還提供了Promise.all、Promise.race等方法，使得處理多個異步請求變得更加方便。最后，通過catch和finally方法，我們可以有效地處理異步請求中的錯誤和進行資源清理。

掌握這些異步請求的狀態管理技巧，將有助于我們編寫更加健壯和高效的JavaScript代碼。