理解 JavaScript Promise：初學者指南-js教程-PHP中文網

理解 JavaScript Promise：初學者指南

PHPz

發布： 2024-08-29 12:10:43

原創

391 人瀏覽過

Understanding JavaScript Promises: A Beginner’s Guide

JavaScript 是一種強大的語言，廣泛用於 Web 開發，而現代 JavaScript 中需要掌握的基本概念之一是 Promise。如果您曾經在非同步程式碼、回呼方面遇到困難，或者只是想編寫更清晰、更具可讀性的程式碼，那麼理解 Promise 是必須的。在這篇文章中，我們將深入探討 Promise 是什麼、它們如何運作以及如何使用它們更有效地處理非同步操作。

什麼是承諾？

在 JavaScript 中，Promise 是一個對象，表示非同步操作的最終完成（或失敗）及其結果值。它就像未來值的佔位符，一旦操作完成，該值將被解析。

Promise 是對傳統的基於回調的非同步程式碼的重大改進，由於其深層嵌套結構和難以管理，通常被稱為「回調地獄」。

承諾如何發揮作用？

Promise 可以是以下三種狀態之一：

Pending：Promise 既未履行也未拒絕的初始狀態。
Fulfilled：操作成功完成時的狀態，且 Promise 已解析為值。
Rejected：操作失敗時的狀態，並且 Promise 被拒絕並有原因（例如錯誤）。

let myPromise = new Promise((resolve, reject) => {
    let success = true; // Simulating an operation

    if (success) {
        resolve("The operation was successful!");
    } else {
        reject("The operation failed.");
    }
});

myPromise.then((message) => {
    console.log(message); // This will run if the Promise is fulfilled
}).catch((error) => {
    console.error(error); // This will run if the Promise is rejected
});

登入後複製

在上面的範例中，如果“success”變數為“true”，則“myPromise”將解析；如果為“false”，則“reject”。「.then()」方法用於處理完成狀態，「.catch()」用於處理任何錯誤。

連結承諾

Promises 最強大的功能之一是您可以將它們連結在一起。這允許您按順序執行多個非同步操作，而不會陷入回調地獄。

myPromise
    .then((message) => {
        console.log(message);
        return new Promise((resolve, reject) => {
            resolve("Another operation completed!");
        });
    })
    .then((newMessage) => {
        console.log(newMessage);
    })
    .catch((error) => {
        console.error(error);
    });

登入後複製

在此範例中，第二個「.then()」在第一個 Promise 完成後運行，從而實現流暢、可讀的非同步操作流程。

處理多個 Promise

有時，您需要等待多個非同步操作完成。這就是「Promise.all()」和「Promise.race()」派上用場的地方。

Promise.all()

此方法接受 Promise 陣列並傳回一個 Promise，當陣列中的所有 Promise 都已解析時，該 Promise 會解析；如果任何 Promise 被拒絕，則該 Promise 會被拒絕。

let promise1 = Promise.resolve("First operation");
let promise2 = Promise.resolve("Second operation");

Promise.all([promise1, promise2]).then((values) => {
    console.log(values); // ["First operation", "Second operation"]
});

登入後複製

Promise.race()

Promise.race() 也接受一個 Promise 數組，但只要數組中的一個 Promise 解析或拒絕，它就會傳回一個解析或拒絕的 Promise。

let promise1 = new Promise((resolve) => setTimeout(resolve, 500, "First operation"));
let promise2 = new Promise((resolve) => setTimeout(resolve, 100, "Second operation"));

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

登入後複製