JavaScript 等待异步 - JavaScript

在 JavaScript 中，异步操作（如网络请求，定时器等）是很常见的。然而，有时我们需要等待异步操作完成后再执行后续操作。在这篇文章中，我们将介绍 JavaScript 中等待异步的几种方法。

1. 回调函数

回调函数是 JavaScript 中处理异步操作的最基本的方法。在执行异步操作时，我们向其传递一个回调函数。当异步操作完成时，调用该回调函数并将结果作为参数传递。

function asyncOperation(callback) {
  // Example async operation
  setTimeout(() => {
    const result = 42;
    callback(result);
  }, 1000);
}

function handleResult(result) {
  console.log(`The result is ${result}`);
}

asyncOperation(handleResult);

在上面的例子中，asyncOperation 是一个执行异步操作的函数，它接受一个回调函数 callback 作为参数。当异步操作完成时，asyncOperation 调用 callback 并将结果作为参数传递。我们通过将 handleResult 函数传递给 asyncOperation 作为回调函数来处理结果。

这个例子中只有一个异步操作和一个回调函数，但实际上我们可能需要对多个异步操作进行串行或并行处理。回调函数可能会变得深度嵌套和难以维护。这被称为回调地狱。

2. Promise

Promise 是 ES2015 引入的一种处理异步操作的方式。它比回调函数更简单和易于维护，尤其是在处理多个异步操作时。

Promise 有三种状态：pending、fulfilled 和 rejected。当一个 Promise 对象被创建时，它处于 pending 状态。当异步操作成功完成时，Promise 被 fulfilled，反之则被 rejected。

function asyncOperation() {
  return new Promise((resolve, reject) => {
    // Example async operation
    setTimeout(() => {
      const result = 42;
      resolve(result);
    }, 1000);
  });
}

asyncOperation()
  .then(result => {
    console.log(`The result is ${result}`);
  })
  .catch(error => {
    console.error(`An error occurred: ${error}`);
  });

在上面的例子中，asyncOperation 函数返回一个 Promise 对象。当异步操作完成时，它调用 resolve 并将结果作为参数传递，使 Promise 对象进入 fulfilled 状态。

我们使用 then() 方法处理异步操作成功的结果，使用 catch() 方法处理异常情况。

Promise 还有一些辅助方法，如 Promise.all() 和 Promise.race()。Promise.all() 在所有异步操作完成后返回结果，Promise.race() 在任一异步操作完成后立即返回结果。这些方法可以使异步代码更简单和可维护。

3. Async/Await

Async/Await 是 ES2017 引入的一种处理异步操作的方式。它基于 Promise，但使用起来更像同步代码。Async/Await 通过让我们使用 async 和 await 关键字来减少回调和 Promise 的使用。

function asyncOperation() {
  return new Promise((resolve, reject) => {
    // Example async operation
    setTimeout(() => {
      const result = 42;
      resolve(result);
    }, 1000);
  });
}

async function main() {
  const result = await asyncOperation();
  console.log(`The result is ${result}`);
}

main();

在上面的例子中，main 是一个异步函数，它包含一个 await 关键字，用于在异步操作完成后等待 Promise 对象。await 会暂停函数执行，直到异步操作完成并返回结果。

Async/Await 让我们以同步的方式编写异步代码，减少了代码的复杂度和深度嵌套的回调。

结论

在 JavaScript 中，我们可以使用回调函数、Promise 和 Async/Await 三种方式来等待异步操作完成。回调函数是最基本的异步操作处理方式，Promise 和 Async/Await 更易于维护并可以处理多个异步操作。Async/Await 让我们以同步的方式编写异步代码。每种方法都有其适用的特定情景，开发人员应根据实际需要选择适合自己的方法。