異步 JavaScript 簡介

JavaScript 是單線程的，這意味著它一次只能執(zhí)行一項任務。為了處理多個任務，尤其是 API 請求或文件讀取等 I/O 操作，JavaScript 使用異步編程。這允許其他任務在等待長時間運行的操作完成時繼續(xù)運行。

回調函數

最初，JavaScript 中的異步任務是使用回調函數處理的?；卣{是一個函數作為參數傳遞給另一個函數，然后在操作完成后執(zhí)行。

示例：

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 是構建在 Promise 之上的語法糖，使異步代碼看起來和行為都像同步代碼。這使得代碼更容易閱讀和理解。

基本用法

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();

并行執(zhí)行

要并行執(zhí)行多個異步操作，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();

先進理念

順序執(zhí)行

如果任務需要順序執(zhí)行，請依次使用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 與傳統(tǒng) Promise 相結合

您可以將 async/await 與傳統(tǒng)的 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中文網其他相關文章！