異步 JavaScript 簡(jiǎn)介

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

回調(diào)函數(shù)

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

示例：

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

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

承諾

Promise 的引入是為了更有效地處理異步操作。 Promise 代表一個(gè)可能現(xiàn)在可用、將來(lái)可用、或者永遠(yuǎ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)建在 Promise 之上的語(yǔ)法糖，使異步代碼看起來(lái)和行為都像同步代碼。這使得代碼更容易閱讀和理解。

基本用法

1. 異步函數(shù)： 使用 async 關(guān)鍵字聲明的函數(shù)返回一個(gè) Promise。
2. Await 關(guān)鍵字：await 關(guān)鍵字只能在異步函數(shù)內(nèi)使用。它讓 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();

錯(cuò)誤處理

通過(guò) async/await，使用 try...catch 塊，錯(cuò)誤處理變得簡(jiǎ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í)行多個(gè)異步操作，Promise.all 可以與 async/await 結(jié)合使用。

示例：

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

先進(jìn)理念

順序執(zhí)行

如果任務(wù)需要順序執(zhí)行，請(qǐng)依次使用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 相結(jié)合

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

示例：

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 通過(guò)提供一種更清晰、更易讀的方式來(lái)編寫異步代碼，簡(jiǎn)化了 JavaScript 中的異步操作。它有效地取代了回調(diào)，并使 Promise 的使用更加直觀。

以上是JavaScript 中的異步和等待的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！