JavaScript 中的 Promise：初學者終極指南

介紹

JavaScript 是一種多功能程式語言，主要用於 Web 開發。 JavaScript 最強大的功能之一是它處理非同步操作的能力。這就是 Promise 發揮作用的地方，它允許開發人員更有效地管理非同步程式碼。本指南將帶您了解 Promise 的基礎知識，提供深入的知識和實際範例，幫助您理解並有效地利用它們。

目錄

Heading	Subtopics
What is a Promise in JavaScript?	Definition, State of a Promise, Basic Syntax
Creating a Promise	Example, Resolving, Rejecting
Chaining Promises	then(), catch(), finally()
Handling Errors	Common Pitfalls, Error Handling Techniques
Promise.all()	Usage, Examples, Handling Multiple Promises
Promise.race()	Usage, Examples, First Settled Promise
Promise.any()	Usage, Examples, First Fulfilled Promise
Promise.allSettled()	Usage, Examples, When All Promises Settle
Async/Await	Syntax, Combining with Promises, Examples
Real-World Examples	Fetch API, Async File Reading
Common Mistakes	Anti-Patterns, Best Practices
Advanced Promise Concepts	Custom Promises, Promise Combinators
FAQs	Answering Common Questions
Conclusion	Summary, Final Thoughts

JavaScript 中的 Promise 是什麼？

JavaScript 中的 Promise 是一個表示非同步操作最終完成或失敗的物件。它允許您將處理程序與非同步操作的最終成功值或失敗原因相關聯。這使得非同步方法能夠像同步方法一樣傳回值：非同步方法不是立即傳回最終值，而是傳回一個在未來某個時刻提供該值的承諾。

承諾的狀態

承諾可以處於以下三種狀態之一：

1. 待處理：初始狀態，既不滿足也不拒絕。
2. 已完成：操作成功完成。
3. 已拒絕：操作失敗。

Promise 的基本語法

let promise = new Promise(function(resolve, reject) {
    // Asynchronous operation
    let success = true;

    if(success) {
        resolve("Operation successful!");
    } else {
        reject("Operation failed!");
    }
});

創造一個承諾

建立 Promise 涉及實例化一個新的 Promise 物件並向其傳遞一個函數。函數有兩個參數：resolve 和reject。

例子

let myPromise = new Promise((resolve, reject) => {
    let condition = true;
    if(condition) {
        resolve("Promise resolved successfully!");
    } else {
        reject("Promise rejected.");
    }
});

myPromise.then((message) => {
    console.log(message);
}).catch((message) => {
    console.log(message);
});

在此範例中，myPromise 將成功解析並記錄「Promise已成功解析！」到控制台。

連結承諾

Promise 的強大功能之一是能夠連結它們。這允許您以可讀且可維護的方式執行一系列非同步操作。

然後（）

then() 方法用於處理承諾的履行。

myPromise.then((message) => {
    console.log(message);
    return "Next step";
}).then((nextMessage) => {
    console.log(nextMessage);
});

抓住（）

catch() 方法用來處理承諾的拒絕。

myPromise.then((message) => {
    console.log(message);
}).catch((error) => {
    console.log(error);
});

最後（）

finally() 方法用來執行程式碼，無論 Promise 是履行還是拒絕。

myPromise.finally(() => {
    console.log("Promise is settled (either fulfilled or rejected).");
});

處理錯誤

處理 Promise 中的錯誤對於健全的程式碼至關重要。

常見陷阱

1. 忽略錯誤：總是使用catch() 處理錯誤。
2. 忘記回傳：確保在 then() 處理程序中回傳承諾。

錯誤處理技術

myPromise.then((message) => {
    console.log(message);
    throw new Error("Something went wrong!");
}).catch((error) => {
    console.error(error.message);
});

Promise.all()

Promise.all() 接受一個 Promise 陣列並傳回單一 Promise，當陣列中的所有 Promise 都解析時，該 Promise 會解析；如果任何一個 Promise 被拒絕，則該 Promise 會被拒絕。

用法

let promise1 = Promise.resolve(3);
let promise2 = 42;
let promise3 = new Promise((resolve, reject) => {
    setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
    console.log(values); // [3, 42, "foo"]
});

Promise.race()

Promise.race() 傳回一個 Promise，只要陣列中的一個 Promise 解析或拒絕，該 Promise 就會解析或拒絕。

用法

let promise1 = new Promise((resolve, reject) => {
    setTimeout(resolve, 500, 'one');
});
let promise2 = new Promise((resolve, reject) => {
    setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then((value) => {
    console.log(value); // "two"
});

Promise.any()

Promise.any() 傳回一個 Promise，只要陣列中的任何一個 Promise 滿足，該 Promise 就會解析；如果所有 Promise 都被拒絕，則該 Promise 會被拒絕。

用法

let promise1 = Promise.reject("Error 1");
let promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, "Success"));
let promise3 = new Promise((resolve, reject) => setTimeout(resolve, 200, "Another success"));

Promise.any([promise1, promise2, promise3]).then((value) => {
    console.log(value); // "Success"
}).catch((error) => {
    console.log(error);
});

Promise.allSettled()

Promise.allSettled() 傳回一個在所有給定的 Promise 都已解決或拒絕後解析的 Promise，其中包含一個物件數組，每個物件都描述每個 Promise 的結果。

用法

let promise1 = Promise.resolve("Resolved");
let promise2 = Promise.reject("Rejected");

Promise.allSettled([promise1, promise2]).then((results) => {
    results.forEach((result) => console.log(result.status));
});

異步/等待

async 和await 關鍵字可讓您以更同步的方式使用promise。

句法

async function myFunction() {
    let myPromise = new Promise((resolve, reject) => {
        setTimeout(() => resolve("Done!"), 1000);
    });

    let result = await myPromise; // Wait until the promise resolves
    console.log(result); // "Done!"
}

myFunction();

與 Promise 結合

async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Error fetching data: ", error);
    }
}

fetchData();

現實世界的例子

取得API

Fetch API 是 Promise 的常見用例。

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

非同步檔案讀取

在 Node.js 中使用 Promise 讀取檔案。

const fs = require('fs').promises;

async function readFile() {
    try {
        let content = await fs.readFile('example.txt', 'utf-8');
        console.log(content);
    } catch (error) {
        console.error('Error reading file:', error);
    }
}

readFile();

常見錯誤

反模式

1. 回呼地獄：避免巢狀 then() 呼叫。
2. 忽略錯誤：永遠處理承諾拒絕。

最佳實踐

1. 總是傳回 Promise：確保在 then() 和 catch() 處理程序中傳回 Promise。
2. 使用 Async/Await：使用 async 和 wait 簡化 Promise 處理。

先進的承諾概念

客製化承諾

您可以建立自訂 Promise 來處理特定的非同步操作。

function customPromiseOperation() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Custom operation complete!");
        }, 2000);
    });
}

customPromiseOperation().then((message) => {
    console.log(message);
});

Promise 組合器

使用 Promise.all()、Promise.race() 等組合器組合多個 Promise，以處理複雜的非同步流程。

常見問題解答

Promise 如何幫助非同步程式設計？
與傳統回調相比，Promise 提供了一種更清晰、更易讀的方式來處理非同步操作，從而降低了「回調地獄」的風險。

then() 和 `

有什麼差別

catch()?
then() 用於處理已解決的 Promise，而 catch()` 用於處理被拒絕的 Promise。

你可以在較舊的 JavaScript 程式碼中使用 Promise 嗎？
是的，Promise 可以與較舊的 JavaScript 程式碼一起使用，但為了完全相容，您可能需要使用 polyfill。

使用 Promise.all() 有什麼好處？
Promise.all() 讓您可以並行執行多個 Promise 並等待所有這些 Promise 完成，從而更輕鬆地管理多個非同步操作。

async/await 如何改善 Promise 處理？
async/await 語法使非同步程式碼的外觀和行為更像同步程式碼，從而提高了可讀性和可維護性。

如果承諾既沒有得到解決也沒有被拒絕會發生什麼事？
如果一個 Promise 既沒有被解決也沒有被拒絕，它就會無限期地保持在待處理狀態。重要的是要確保所有承諾最終得到解決或拒絕，以避免潛在的問題。

結論

Promise 是現代 JavaScript 的基本組成部分，使開發人員能夠更有效率、更易讀地處理非同步操作。透過掌握 Promise，您可以編寫更清晰、更易於維護的程式碼，從而有效地處理非同步程式設計的複雜性。無論您是從 API 獲取資料、讀取檔案還是執行自訂非同步任務，理解 Promise 對於任何 JavaScript 開發人員來說都是至關重要的。

以上是JavaScript 中的 Promise：初學者終極指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！