JavaScript 中的异步编程：掌握回调、承诺和异步/等待

2023-10-31 11:50:24

JavaScript 异步编程：回调、承诺和异步/等待

JavaScript 作为一种单线程语言，一次只能执行一项任务。然而，它也提供了处理异步任务的机制，使我们能够在不阻塞主线程的情况下执行操作。本文将深入探讨回调、承诺和异步/等待这三种常用的异步编程方法，并比较它们的优缺点。

回调

回调是函数，它们在异步操作完成后执行。在异步函数中，将回调函数作为参数传递，并在操作完成后调用它。回调函数可以访问异步操作的结果，并利用这些信息更新应用程序的状态。

示例：

const getUserName = (id, callback) => {
  setTimeout(() => {
    callback(null, { id: id, name: 'John Doe' });
  }, 1000);
};

getUserName(1, (err, user) => {
  if (err) {
    console.error(err);
  } else {
    console.log(`User ${user.name} has ID ${user.id}`);
  }
});

承诺

承诺是代表异步操作结果的对象，它可以处于三种状态：挂起、已解决或已拒绝。在异步操作完成后，承诺状态从挂起变为已解决或已拒绝。已解决的承诺包含结果，而已拒绝的承诺包含错误消息。

示例：

const getUserName = (id) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ id: id, name: 'John Doe' });
    }, 1000);
  });
};

getUserName(1)
  .then((user) => {
    console.log(`User ${user.name} has ID ${user.id}`);
  })
  .catch((err) => {
    console.error(err);
  });

异步/等待

异步/等待是 JavaScript 中一种语法糖，允许我们使用同步风格编写异步代码。它使用 await 暂停函数执行，直到异步操作完成。一旦操作完成，函数恢复执行。

示例：

const getUserName = async (id) => {
  const user = await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ id: id, name: 'John Doe' });
    }, 1000);
  });

  return user;
};

const user = await getUserName(1);
console.log(`User ${user.name} has ID ${user.id}`);