什么是async/await？

最新推荐文章于 2025-03-31 17:17:20 发布

编程微刊(祈澈菇凉)

最新推荐文章于 2025-03-31 17:17:20 发布

阅读量1.4k

点赞数 21

文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_38822390/article/details/145682429

版权

async/await 是 JavaScript 中用于处理异步操作的语法糖，基于 Promise 构建，旨在使异步代码更易于编写和理解。通过使用 async/await，开发者可以以更加直观的方式处理异步任务，减少回调地狱的复杂性，提升代码的可读性和可维护性。本文将详细探讨 async/await 的概念、使用方法、优势及应用场景。

一、背景知识

1. 异步编程的挑战

在 JavaScript 中，异步编程是处理网络请求、文件读写、定时器等操作的重要方式。然而，传统的异步编程方式（如回调函数和 Promise）常常导致代码难以维护和理解，特别是在需要多个异步操作串联时，容易形成“回调地狱”。

2. Promise 的引入

为了应对上述问题，JavaScript 引入了 Promise，提供了一种更清晰的方式来处理异步操作。Promise 可以有三种状态：待定（Pending）、已兑现（Fulfilled）和已拒绝（Rejected），并允许使用 .then() 和 .catch() 方法链式处理结果和错误。

二、什么是 async/await

1. 定义

async 是一个关键字，用于定义异步函数。任何使用 async 声明的函数都返回一个 Promise，即使函数内部没有显式返回 Promise。await 是另一个关键字，用于等待一个 Promise 的解决（resolve）或拒绝（reject）。

2. 基本语法

定义异步函数：

async function myAsyncFunction() {
    // 函数主体
}

使用 await 关键字：

await 关键字只能在 async 函数内部使用，它会暂停函数的执行，直到 Promise 被解决或拒绝。

async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
}

3. 返回值

async 函数始终返回一个 Promise。如果函数内部有返回值，这个值会被 Promise.resolve() 包装；如果函数抛出错误，则返回的 Promise 会被拒绝。

三、使用方法

1. 定义和调用 async 函数

使用 async 关键字定义一个异步函数，然后可以直接调用它。

示例

async function greet() {
    return 'Hello, World!';
}

greet().then(message => console.log(message)); // 输出: Hello, World!

2. 使用 await 等待 Promise

在 async 函数内部，可以使用 await 来等待 Promise 的结果。

示例

async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
}

3. 错误处理

在 async 函数中，可以使用 try...catch 来捕获异步操作中的错误。

示例

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

4. 并行执行多个异步操作

对于可以并行执行的多个异步操作，可以使用 Promise.all()。

示例

async function fetchMultiple() {
    try {
        const [userResponse, postsResponse] = await Promise.all([
            fetch('https://api.example.com/user'),
            fetch('https://api.example.com/posts')
        ]);
        const user = await userResponse.json();
        const posts = await postsResponse.json();
        console.log(user, posts);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

5. 在循环中使用 await

在循环中使用 await 会导致异步操作按顺序执行，可能降低性能。可以通过 Promise.all() 来并行处理多个请求。

示例

async function fetchAllPosts(postIds) {
    const promises = postIds.map(id => fetch(`https://api.example.com/posts/${id}`));
    try {
        const responses = await Promise.all(promises);
        const posts = await Promise.all(responses.map(res => res.json()));
        console.log(posts);
    } catch (error) {
        console.error('Error fetching posts:', error);
    }
}

四、async/await 的优势

1. 可读性强

async/await 使得异步代码的结构更接近于同步代码，减少了回调地狱的出现。代码的每一步都清晰明了，有助于理解执行流程。

2. 简化错误处理

使用 try...catch 来处理错误，使得错误处理逻辑更为清晰，避免了在多个 .catch() 中重复编写错误处理代码。

3. 更易于调试

由于 async/await 使得代码结构更清晰，调试时可以更容易地跟踪代码执行流程。使用传统的 .then() 可能会导致栈跟踪不够明确。

4. 顺序执行异步操作

在某些情况下，可以通过简单地使用 await 顺序执行多个异步操作，而不需要手动管理 Promise 的链式调用。

示例

async function sequentialFetch() {
    const userResponse = await fetch('https://api.example.com/user');
    const user = await userResponse.json();

    const postsResponse = await fetch(`https://api.example.com/users/${user.id}/posts`);
    const posts = await postsResponse.json();

    console.log(user, posts);
}

5. 支持并行处理

async/await 与 Promise.all() 结合使用，能够轻松实现多个异步操作的并行处理，提高性能。

五、应用场景

1. API 请求

在处理 API 请求时，async/await 是非常常用的工具，使得代码更清晰易懂。

async function fetchUserData(userId) {
    try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const userData = await response.json();
        console.log(userData);
    } catch (error) {
        console.error('Error fetching user data:', error);
    }
}

2. 文件读取

在 Node.js 中，读取文件也是使用 async/await 的常见场景。

const fs = require('fs').promises;

async function readFile(filePath) {
    try {
        const data = await fs.readFile(filePath, 'utf8');
        console.log(data);
    } catch (error) {
        console.error('Error reading file:', error);
    }
}

3. 定时器

使用 async/await 可以简化定时器的使用，使得代码更为简洁。

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function executeAfterDelay() {
    console.log('Waiting for 2 seconds...');
    await delay(2000);
    console.log('Executed after 2 seconds');
}

executeAfterDelay();