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 是构建在 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();

并行执行

要并行执行多个异步操作，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中文网其他相关文章！