Promise 基礎概念

Promise 是 JavaScript 中處理異步操作的一種對象，代表一個異步操作的最終完成或失敗及其結果值。它有三種狀態：Pending（進行中）、Fulfilled（已成功）、Rejected（已失敗）。

創建 Promise 的語法如下：

const promise = new Promise((resolve, reject) => {// 異步操作if (/* 成功 */) {resolve(value);} else {reject(error);}
});

Promise 鏈式調用

Promise 可以通過 .then() 和 .catch() 方法鏈式調用，處理異步操作的成功或失敗結果。

promise.then(value => {// 處理成功結果return anotherValue;}).then(newValue => {// 繼續處理}).catch(error => {// 處理錯誤});

Promise 靜態方法

ES6 提供了一些靜態方法簡化異步操作的處理：

Promise.all()
等待所有 Promise 完成，或其中一個失敗：

Promise.all([promise1, promise2]).then(values => console.log(values)).catch(error => console.error(error));

Promise.race()
返回第一個完成（成功或失敗）的 Promise：

Promise.race([promise1, promise2]).then(value => console.log(value)).catch(error => console.error(error));

Promise.resolve() 和 Promise.reject()
快速創建已解決或已拒絕的 Promise：

Promise.resolve('success').then(console.log);
Promise.reject('error').catch(console.error);

異步函數（Async/Await）

Async/Await 是 ES8 引入的語法糖，基于 Promise，簡化異步代碼的書寫。

async 函數
聲明一個異步函數，返回值會被自動包裝為 Promise：

async function fetchData() {return 'data';
}

await 表達式
在 async 函數中等待 Promise 完成：

async function fetchData() {const response = await fetch('https://api.example.com');const data = await response.json();return data;
}

錯誤處理
使用 try/catch 捕獲異步操作中的錯誤：

async function fetchData() {try {const response = await fetch('https://api.example.com');const data = await response.json();return data;} catch (error) {console.error('Fetch failed:', error);}
}

常見應用場景

AJAX 請求
使用 Promise 封裝 XMLHttpRequest 或 Fetch API：

function fetchUser(id) {return new Promise((resolve, reject) => {fetch(`https://api.example.com/users/${id}`).then(response => response.json()).then(resolve).catch(reject);});
}

定時操作
用 Promise 封裝 setTimeout：

function delay(ms) {return new Promise(resolve => setTimeout(resolve, ms));
}

注意事項

• 避免 Promise 嵌套過深，盡量使用鏈式調用或 async/await。
• 在 async 函數中，忘記使用 await 可能導致邏輯錯誤。
• 使用 .catch() 或 try/catch 處理錯誤，避免未捕獲的 Promise 拒絕。