JavaScript 中的异步和等待

哈喽！今天心血来潮给大家带来了《JavaScript 中的异步和等待》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

JavaScript异步编程简述

JavaScript是单线程语言，一次只能执行一个任务。为处理多个任务，特别是I/O操作（例如API请求或文件读取），JavaScript采用异步编程。这使得在等待耗时操作完成时，其他任务可以继续执行。

回调函数

最初，JavaScript异步任务通过回调函数处理。回调函数作为参数传递给另一个函数，并在操作完成后执行。

示例：

function 获取数据(回调) {
    setTimeout(() => {
        回调('数据获取成功');
    }, 2000);
}

获取数据((消息) => {
    console.log(消息);
});

Promise

Promise的引入旨在更有效地处理异步操作。Promise代表一个可能立即可用、将来可用或永远不可用的值。

示例：

let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('数据获取成功');
    }, 2000);
});

promise.then((消息) => {
    console.log(消息);
}).catch((错误) => {
    console.error(错误);
});

async/await

async/await是基于Promise的语法糖，使异步代码看起来和运行起来都像同步代码。这使得代码更易读懂。

基本用法

1. 异步函数: 使用async关键字声明的函数返回一个Promise。
2. await关键字: await关键字只能在异步函数内使用。它使JavaScript等待，直到Promise完成或拒绝。

示例：

async function 获取数据() {
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve('数据获取成功'), 2000);
    });

    let 结果 = await promise; // 等待Promise完成
    console.log(结果);
}

获取数据();

错误处理

使用async/await，通过try...catch块简化了错误处理。

示例：

async function 获取数据() {
    try {
        let promise = new Promise((resolve, reject) => {
            setTimeout(() => reject('数据获取失败'), 2000);
        });

        let 结果 = await promise;
        console.log(结果);
    } catch (错误) {
        console.error(错误);
    }
}

获取数据();

并发执行

要并发执行多个异步操作，可以使用Promise.all结合async/await。

示例：

async function 获取所有数据() {
    let promise1 = new Promise((resolve) => setTimeout(() => resolve('数据1'), 2000));
    let promise2 = new Promise((resolve) => setTimeout(() => resolve('数据2'), 1000));

    let 结果 = await Promise.all([promise1, promise2]);
    console.log(结果); // ['数据1', '数据2']
}

获取所有数据();

高级概念

顺序执行

如果任务需要顺序执行，请依次使用await。

示例：

async function 顺序获取数据() {
    let 数据1 = await new Promise((resolve) => setTimeout(() => resolve('数据1'), 2000));
    console.log(数据1);

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

顺序获取数据();

结合传统Promise

可以将async/await与传统的Promise方法（例如then和catch）结合使用。

示例：

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

获取数据().then((data) => {
    console.log(data);
}).catch((error) => {
    console.error(error);
});

结论

async/await通过提供一种更清晰、更易读的方式来编写异步代码，简化了JavaScript中的异步操作。它有效地替代了回调，并使Promise的使用更加直观。

今天关于《JavaScript 中的异步和等待》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！