返回文章列表

JavaScript异步编程:深入理解async/await

异步编程是JavaScript的核心特性之一。本文将从回调函数讲起,逐步介绍Promise和async/await,帮助你全面掌握JavaScript的异步编程。

为什么需要异步

JavaScript是单线程语言,如果所有操作都是同步的,那么一个耗时的操作(如网络请求)会阻塞整个程序。异步编程允许我们在等待耗时操作完成的同时继续执行其他代码。

回调函数

function fetchData(callback) {
    setTimeout(function() {
        callback({ name: '平平的小破站', url: 'https://ppkjgzs.top' });
    }, 1000);
}

fetchData(function(data) {
    console.log(data.name);  // 平平的小破站
});

Promise

function fetchData() {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve({ name: '平平的小破站', url: 'https://ppkjgzs.top' });
        }, 1000);
    });
}

fetchData()
    .then(function(data) {
        console.log(data.name);
    })
    .catch(function(error) {
        console.error(error);
    });

async/await

async function getData() {
    try {
        const data = await fetchData();
        console.log(data.name);
    } catch (error) {
        console.error(error);
    }
}

getData();

并发控制

// 并行执行多个异步操作
async function fetchAllData() {
    const [users, posts, comments] = await Promise.all([
        fetchUsers(),
        fetchPosts(),
        fetchComments()
    ]);
    return { users, posts, comments };
}

最佳实践

动手挑战

学到这里,不妨动手试一试以下练习,巩固你的理解:

  1. 基础练习:回顾本文核心概念,用自己的话总结关键知识点。
  2. 进阶实践:将文中的示例代码运行一遍,尝试修改参数观察变化。
  3. 拓展思考:想一想这个技术/方法还能应用在哪些场景中?

小贴士:遇到问题时,先独立思考,再查阅资料,最后请教他人——这是成长最快的学习方式。

赞赏支持

本文更新于 2026-08-22,环境 Node.js 20 / 现代浏览器