返回文章列表

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 };
}

最佳实践