JavaScript 中的非同步與等待

異步 JavaScript 簡介

JavaScript 是單執行緒的，這表示它一次只能執行一項任務。為了處理多個任務，尤其是 API 請求或檔案讀取等 I/O 操作，JavaScript 使用非同步程式設計。這允許其他任務在等待長時間運行的操作完成時繼續運行。

回呼函數

最初，JavaScript 中的非同步任務是使用回呼函數處理的。回調是一個函數作為參數傳遞給另一個函數，然後在操作完成後執行。

範例：

function fetchData(callback) {
    setTimeout(() => {
        callback('Data fetched');
    }, 2000);
}

fetchData((message) => {
    console.log(message);
});

承諾

Promise 的引入是為了更有效地處理非同步操作。 Promise 代表一個可能現在可用、將來可用、或永遠不可用的值。

範例：

let promise = new [Promise]((resolve, reject) => {
    setTimeout(() => {
        resolve('Data fetched');
    }, 2000);
});

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

異步/等待

Async/Await 是建構在 Promises 之上的語法糖，讓非同步程式碼看起來和行為都像同步程式碼。這使得程式碼更容易閱讀和理解。

基本用法

1. 非同步函數： 使用 async 關鍵字宣告的函數傳回一個 Promise。
2. Await 關鍵字：await 關鍵字只能在非同步函數內使用。它讓 JavaScript 等待，直到 Promise 得到解決或拒絕。

範例：

async function fetchData() {
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve('Data fetched'), 2000);
    });

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

fetchData();

錯誤處理

透過 async/await，使用 try...catch 區塊，錯誤處理變得簡單。

範例：

async function fetchData() {
    try {
        let promise = new Promise((resolve, reject) => {
            setTimeout(() => reject('Error fetching data'), 2000);
        });

        let result = await promise;
        console.log(result);
    } catch (error) {
        console.error(error);
    }
}

fetchData();

平行執行

要並行執行多個非同步操作，Promise.all 可以與 async/await 結合使用。

範例：

async function fetchAllData() {
    let promise1 = new Promise((resolve) => setTimeout(() => resolve('Data 1'), 2000));
    let promise2 = new Promise((resolve) => setTimeout(() => resolve('Data 2'), 1000));

    let results = await Promise.all([promise1, promise2]);
    console.log(results); // ['Data 1', 'Data 2']
}

fetchAllData();

先進理念

順序執行

如果任務需要順序執行，請依序使用await。

範例：

async function fetchSequentialData() {
    let data1 = await new Promise((resolve) => setTimeout(() => resolve('Data 1'), 2000));
    console.log(data1);

    let data2 = await new Promise((resolve) => setTimeout(() => resolve('Data 2'), 1000));
    console.log(data2);
}

fetchSequentialData();

將 Async/Await 與傳統 Promise 結合

您可以將 async/await 與傳統的 Promise 方法（例如 then 和 catch）結合。

範例：

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

fetchData().then((data) => {
    console.log(data);
}).catch((error) => {
    console.error(error);
});

結論

Async/Await 透過提供一種更清晰、更易讀的方式來編寫非同步程式碼，簡化了 JavaScript 中的非同步操作。它有效地取代了回調，並使 Promise 的使用更加直觀。

以上是JavaScript 中的非同步與等待的詳細內容。更多資訊請關注PHP中文網其他相關文章！