如何从 JavaScript 中的异步调用返回响应？

在 JavaScript 中，异步调用并不会在调用时立即返回结果，而是通过回调函数的方式异步返回。因此，如果需要在异步调用中返回响应，我们需要在回调函数中处理返回的数据。本文将介绍几种常见的异步调用返回响应的方式。

回调函数

最常见的处理异步调用返回响应的方式就是使用回调函数。

function getData(callback) {
  setTimeout(() => {
    const data = { name: 'John', age: 30 };
    callback(data);
  }, 1000);
}

getData(data => {
  console.log(data.name); // 输出 'John'
});

上面的例子中，getData 方法在异步调用后，通过回调函数将返回的数据传递给了参数 callback，在回调函数中处理返回的数据。

Promise

ES6 引入了 Promise，它是一种更为简单、直观的处理异步操作的方法。

function getData() {
  return new Promise(resolve => {
    setTimeout(() => {
      const data = { name: 'John', age: 30 };
      resolve(data);
    }, 1000);
  });
}

getData().then(data => {
  console.log(data.name); // 输出 'John'
});

上面的例子中，getData 方法返回一个 Promise 对象，当异步操作完成后，调用 resolve 方法将返回的数据传递给下一个 then 或 catch 方法。

async/await

在 ES8 中引入了 async/await，它是基于 Promise 的更高级的异步操作处理方式。

function getData() {
  return new Promise(resolve => {
    setTimeout(() => {
      const data = { name: 'John', age: 30 };
      resolve(data);
    }, 1000);
  });
}

async function main() {
  const data = await getData();
  console.log(data.name); // 输出 'John'
}

main();

上面的例子使用了 async/await，main 方法中通过 await 关键字等待异步操作完成，并将返回的数据赋值给变量 data，然后直接在方法中处理返回的数据。

总结

回调函数、Promise 和 async/await 都是处理 JavaScript 中的异步调用返回响应的常见方式，具体使用哪种方式取决于具体的应用场景和开发需求。