使用 JavaScript 控制你的承諾

發佈於2024-11-01

Controla tus promesa con JavaScript

在 JavaScript 中處理非同步操作對於創建高效且流暢的應用程式至關重要。這就是承諾發揮作用的地方。您是否想知道如何防止程式碼在等待伺服器回應時阻塞？或者，如何才能在其他任務完成後才執行某些任務？好吧，JavaScript 中的 Promise 就是您正在尋找的解決方案。

在本文中，我們將探討 Promise 是什麼、它們如何運作以及它們如何改善應用程式的流程。讓我們深入了解細節。

JavaScript 中的 Promise 是什麼？

JavaScript 中的 Promise 是一個對象，表示非同步操作的最終完成（或失敗）及其結果值。換句話說，Promise 是一個處理非同步程式碼執行的中介，並允許您使用在編寫程式碼時尚不知道的值。

承諾的主要特點：

Pending： 初始狀態，非同步操作尚未完成。
已解決（已完成）： 非同步操作已成功完成並已獲得結果。
已拒絕： 非同步操作失敗，並提供原因或錯誤。

Promise 的這個生命週期允許更清晰、更有效率地處理非同步操作，避免「回調地獄」。

為什麼要使用 Promise？

在處理對伺服器的請求時，Promise 特別有用。假設您發出 HTTP 請求來取得資料。等待時間可能會有所不同，您不希望應用程式在回應到達時凍結。使用 Promise 可讓您的程式碼無需等待即可繼續執行，從而提高應用程式的整體效能。

此外，promise也適用於其他情況，例如：

檔案操作： 您可以等待檔案上傳或處理後再執行另一個任務。
DOM 修改： 若需要確保某些介面變更完成後再繼續其他操作。

Promise 還允許您以更具可讀性和可維護性的方式將多個非同步操作連結在一起。

如何在 JavaScript 中使用 Promise

要建立 Promise，請使用 Promise 建構函數，傳遞帶有兩個參數的函數：resolve 和reject。

let miPromesa = new Promise((resolve, reject) => {
    // Simulación de una operación asíncrona
    let exito = true;

    if (exito) {
        resolve("Operación exitosa!");
    } else {
        reject("Ocurrió un error.");
    }
});

為了處理 Promise 的結果，使用 .then() 和 .catch() 方法：

miPromesa
    .then((mensaje) => {
        console.log(mensaje); // "Operación exitosa!"
    })
    .catch((error) => {
        console.error(error); // "Ocurrió un error."
    });`

Promise 相對於回呼的優點

在引入 Promise 之前，處理非同步操作主要是透過回調完成的。然而，這可能會導致程式碼難以遵循和維護，特別是當嵌套多個回調時，稱為“回調地獄”。

promise的優點：

可讀性：程式碼更容易閱讀和遵循。
維護： 方便識別和處理錯誤。
連結： 您可以以更有組織的方式連結多個非同步操作。

Promise 與非同步/等待

雖然 Promise 相對於回呼有了顯著的改進，但 ECMAScript 2017 中 async/await 的引入進一步簡化了處理非同步操作的語法。

async function obtenerDatos() {
    try {
        let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error:', error);
    }
}

使用 async/await，程式碼變得更加線性，類似於同步程式碼，但在底層仍然是非同步的。但是，需要注意的是，async/await 的核心仍然使用 Promise，因此了解 Promise 的工作原理是掌握 async/await 使用的關鍵。