【前端】JavaScript的async和await

JavaScript异步编程：async与await

最新推荐文章于 2025-12-04 22:56:41 发布

原创最新推荐文章于 2025-12-04 22:56:41 发布 · 504 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

前端同时被 2 个专栏收录

17 篇文章

订阅专栏

JavaScript

2 篇文章

订阅专栏

JavaScript的async和await关键字是在ES2017（也称为ES8）规范中引入的。具体发布时间是2017年6月。async和await为处理异步操作提供了一种更直观和简洁的方法，使得代码看起来像是同步执行，从而更容易阅读和维护。

以下是async和await的一些基本用法和例子：

基本用法

async 函数

一个函数被声明为async，它就会返回一个Promise。即使函数内部没有返回Promise，JavaScript引擎会自动将返回值包装成一个Promise。

async function myFunction() {
    return "Hello";
}

myFunction().then(result => console.log(result)); // 输出: Hello

await 表达式

await关键字只能在async函数内部使用。它可以等待一个Promise对象的解析，并返回其解析值。如果等待的Promise被拒绝，await会抛出该拒绝值。

async function myFunction() {
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve("Done!"), 1000);
    });

    let result = await promise; // 等待 promise 解析
    console.log(result); // 输出: Done!
}

myFunction();

例子

以下是一个使用async和await来处理异步操作的例子：

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data fetched");
        }, 2000);
    });
}

async function fetchAndLogData() {
    console.log("Fetching data...");
    const data = await fetchData(); // 等待 fetchData 的解析
    console.log(data); // 输出: Data fetched
}

fetchAndLogData();

在这个例子中，fetchData函数模拟了一个异步操作（例如从服务器获取数据）。fetchAndLogData函数使用await来等待fetchData的完成，然后输出结果。

异常处理

在async函数中处理异步操作的异常，可以使用try...catch语句：

async function myFunction() {
    try {
        let response = await fetch('https://api.example.com/data');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error:', error);
    }
}

myFunction();

这种方式使得异步代码的异常处理变得更加简洁和清晰。

async和await关键字极大地改善了JavaScript异步编程的体验，使得代码更具可读性和可维护性。