JavaScript 异步编程详解：从回调到 async/await

2026年3月4日
JavaScript
15分钟阅读

JavaScript 是一门单线程语言，这意味着它一次只能执行一个任务。然而，在实际应用中，我们经常需要处理异步操作，如网络请求、文件读写、定时器等。为了处理这些异步操作，JavaScript 发展出了多种异步编程模式，从最初的回调函数，到 Promise，再到现在的 async/await。

1. 回调函数（Callbacks）

回调函数是最原始的异步编程方式，它是一个作为参数传递给另一个函数的函数，在异步操作完成后被调用。

function fetchData(callback) {
    setTimeout(() => {
        const data = { name: 'John', age: 30 };
        callback(data);
    }, 1000);
}

fetchData((data) => {
    console.log('获取到数据:', data);
});

回调函数的优点是简单直接，但当处理多个异步操作时，容易导致回调地狱（Callback Hell）：

fetchUser((user) => {
    fetchPosts(user.id, (posts) => {
        fetchComments(posts[0].id, (comments) => {
            console.log(comments);
        });
    });
});

2. Promise

Promise 是 ES6 引入的一种异步编程解决方案，它代表一个异步操作的最终完成（或失败）及其结果值。

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = { name: 'John', age: 30 };
            resolve(data);
            // 或者在失败时 reject(new Error('获取数据失败'));
        }, 1000);
    });
}

fetchData()
    .then((data) => {
        console.log('获取到数据:', data);
        return fetchMoreData(data);
    })
    .then((moreData) => {
        console.log('获取到更多数据:', moreData);
    })
    .catch((error) => {
        console.error('发生错误:', error);
    });

Promise 通过链式调用解决了回调地狱的问题，使代码更加清晰可读。

3. async/await

async/await 是 ES2017 引入的语法糖，它基于 Promise，使异步代码看起来更像同步代码，进一步提高了代码的可读性。

async function getData() {
    try {
        const data = await fetchData();
        console.log('获取到数据:', data);
        const moreData = await fetchMoreData(data);
        console.log('获取到更多数据:', moreData);
        return moreData;
    } catch (error) {
        console.error('发生错误:', error);
        throw error;
    }
}

getData();

3.1 async 函数

使用 async 关键字声明的函数会返回一个 Promise。如果函数返回一个值，Promise 会被解析为该值；如果函数抛出异常，Promise 会被拒绝。

3.2 await 表达式

await 表达式只能在 async 函数中使用，它会暂停 async 函数的执行，等待 Promise 解析或拒绝，然后继续执行 async 函数并返回解析值。

4. 异步编程最佳实践

  1. 使用 async/await：在现代 JavaScript 中，优先使用 async/await，因为它使代码更易读、更易维护。
  2. 处理错误：始终使用 try/catch 块捕获 async/await 中的错误。
  3. 并行执行：对于相互独立的异步操作，使用 Promise.all() 并行执行以提高性能。
  4. 避免阻塞：不要在主线程中执行耗时操作，使用 Web Workers 处理密集计算。

5. 实际应用示例

下面是一个使用 async/await 处理网络请求的实际示例：

async function getUserData(userId) {
    try {
        // 并行获取用户信息和帖子
        const [user, posts] = await Promise.all([
            fetch(`https://api.example.com/users/${userId}`).then(res => res.json()),
            fetch(`https://api.example.com/users/${userId}/posts`).then(res => res.json())
        ]);
        
        // 获取每个帖子的评论
        const postsWithComments = await Promise.all(
            posts.map(async post => {
                const comments = await fetch(`https://api.example.com/posts/${post.id}/comments`)
                    .then(res => res.json());
                return { ...post, comments };
            })
        );
        
        return { user, posts: postsWithComments };
    } catch (error) {
        console.error('获取用户数据失败:', error);
        throw error;
    }
}

// 使用函数
getUserData(1)
    .then(data => console.log('用户数据:', data))
    .catch(error => console.error('错误:', error));

6. 总结

JavaScript 的异步编程发展经历了从回调函数到 Promise，再到 async/await 的演变过程。每一次演变都使异步代码变得更加简洁、可读和可维护。

  • 回调函数：简单直接，但容易导致回调地狱。
  • Promise：通过链式调用解决了回调地狱，使代码更加清晰。
  • async/await：基于 Promise，使异步代码看起来像同步代码，进一步提高了可读性。

在现代 JavaScript 开发中，建议优先使用 async/await 语法，并结合 Promise.all() 等方法优化异步操作的性能。

返回博客列表