異步 JavaScript 簡介

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

回呼函數(shù)

最初，JavaScript 中的非同步任務(wù)是使用回呼函數(shù)處理的?；卣{(diào)是一個函數(shù)作為參數(shù)傳遞給另一個函數(shù)，然後在操作完成後執(zhí)行。

範(fàn)例：

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

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

承諾

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

範(fàn)例：

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

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

異步/等待

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

基本用法

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

範(fàn)例：

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 區(qū)塊，錯誤處理變得簡單。

範(fàn)例：

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 結(jié)合使用。

範(fàn)例：

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í)行

如果任務(wù)需要順序執(zhí)行，請依序使用await。

範(fàn)例：

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 結(jié)合

您可以將 async/await 與傳統(tǒng)的 Promise 方法（例如 then 和 catch）結(jié)合。

範(fàn)例：

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

結(jié)論

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

以上是JavaScript 中的非同步與等待的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！