如何在 JavaScript 中等待

在 JavaScript 中有很多异步操作，比如加载远程数据、读取文件、定时器等等。这些操作都是非阻塞的，也就是说它们会立即返回，而不是等到操作完成后再继续执行下面的代码。这就会导致操作的执行顺序不可预测，给编程带来困难。

为了解决这个问题，我们需要等待异步操作完成后再继续执行下面的代码。下面介绍几种常见的方法。

回调函数

回调函数是最常见的等待异步操作完成的方法。我们可以在异步操作完成后调用回调函数，将结果作为参数传递给回调函数。

function loadData(callback) {
  // 异步操作...
  callback(data); // 在异步操作完成后调用回调函数
}

loadData(function(data) {
  console.log(data); // 在回调函数中处理数据
});

这种方式虽然简单，但是嵌套多个异步操作后会形成"回调地狱"，代码难以维护。

Promise

Promise 是 ES6 引入的解决异步编程问题的机制。Promise 表示一个异步操作的最终完成或失败，并返回一个包含操作结果的对象。我们可以通过 then() 方法在 Promise 完成后处理数据，也可以通过 catch() 方法在 Promise 失败时处理错误。

function loadData() {
  return new Promise(function(resolve, reject) {
    // 异步操作...
    if (success) {
      resolve(data); // 在异步操作完成后调用 resolve() 方法
    } else {
      reject(error); // 在异步操作失败后调用 reject() 方法
    }
  });
}

loadData()
  .then(function(data) {
    console.log(data); // 在 Promise 完成后处理数据
  })
  .catch(function(error) {
    console.error(error); // 在 Promise 失败时处理错误
  });

这种方式可以避免"回调地狱"，但是代码还是比较冗长。

async/await

async/await 是 ES8 引入的异步编程方式。async 函数声明的函数体内部使用 await 关键字来等待 Promise 异步操作完成后再执行下面的代码。

async function loadData() {
  let data = await fetch(url); // wait for the fetch operation to complete
  console.log(data); // after the fetch operation completed
}

loadData();

这种方式让异步代码看起来像同步代码，代码简洁易读，但是需要注意的是 async 函数实际上返回的是一个 Promise 对象，需要使用 then() 方法处理异步操作的结果。

总结

以上介绍了 JavaScript 中等待异步操作的三种方式：回调函数、Promise 和 async/await。可以根据具体情况选择合适的方式，使代码更易维护。