JS 等待异步执行完再执行|极客笔记

JS 等待异步执行完再执行

在 JavaScript 中，由于异步操作的存在，有时候我们需要等待异步操作执行完毕之后再执行后续的代码。本文将详细介绍在 JavaScript 中如何实现等待异步操作执行完毕再执行其余代码的方法。

1. 回调函数

回调函数是处理异步操作的一种常见方式。通过在异步操作完成后调用回调函数来执行后续的逻辑。

function asyncOperation(callback) {
  setTimeout(() => {
    console.log("异步操作已完成");
    callback();
  }, 2000);
}

function doSomethingElse() {
  console.log("执行后续操作");
}

asyncOperation(doSomethingElse);

在上面的代码中，asyncOperation 是一个模拟的异步操作，通过 setTimeout 模拟了一个异步操作在 2 秒之后完成。在异步操作完成后会调用传入的回调函数 doSomethingElse 来执行后续的操作。

运行结果：

异步操作已完成
执行后续操作

2. Promise

Promise 是 ES6 中引入的一种处理异步操作的新方式，通过 Promise 可以更优雅地处理异步代码。

function asyncOperation() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("异步操作已完成");
      resolve();
    }, 2000);
  });
}

asyncOperation()
  .then(() => {
    console.log("执行后续操作");
  });

在上面的代码中，asyncOperation 返回一个 Promise 对象，在异步操作完成后调用 resolve 方法表示操作成功执行完成。接着在调用 asyncOperation 函数时，我们可以通过 then 方法指定后续的操作。

运行结果：

异步操作已完成
执行后续操作

3. Async/Await

Async/Await 是 ES8 中引入的新特性，使得处理异步操作更加方便和简洁。通过 async 和 await 关键字，我们可以以同步的形式编写异步代码。

function asyncOperation() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("异步操作已完成");
      resolve();
    }, 2000);
  });
}

async function doAsyncOperation() {
  await asyncOperation();
  console.log("执行后续操作");
}

doAsyncOperation();

在上面的代码中，async function 定义了一个异步函数 doAsyncOperation，在函数内部通过 await 关键字等待 asyncOperation 函数执行完成，然后执行后续的操作。

运行结果：

异步操作已完成
执行后续操作

4. 回调地狱与解决方案

在使用回调函数处理复杂的异步操作时，容易出现回调地狱的情况，即多层嵌套的回调函数让代码难以维护和阅读。为了解决这个问题，可以使用 Promise 和 Async/Await。

// 回调地狱示例
asyncOperation1(() => {
  asyncOperation2(() => {
    asyncOperation3(() => {
      // 后续操作
    });
  });
});

// Promise 解决回调地狱
asyncOperation1()
  .then(() => asyncOperation2())
  .then(() => asyncOperation3())
  .then(() => {
    // 后续操作
  });

// Async/Await 解决回调地狱
async function doAsyncOperations() {
  await asyncOperation1();
  await asyncOperation2();
  await asyncOperation3();
  // 后续操作
}

doAsyncOperations();