JavaScript 回调

JavaScript 回调是一种编程模式，可用于处理异步操作。当代码需要处理异步操作时，可能会需要等待一段时间或者在未来的某个时间执行回调函数。

什么是回调？

回调是一种函数，作为参数传递给另一个函数，并在该函数执行时被调用。回调通常用于处理异步操作，例如 AJAX 请求，文件读取或计时器事件。

以下是一个示例，该示例使用回调函数来处理 AJAX 响应：

function requestData(callback) {
  const xhr = new XMLHttpRequest();

  xhr.open('GET', '/api/data');
  xhr.onload = () => callback(xhr.responseText);
  xhr.onerror = () => callback(null);
  xhr.send();
}

requestData((data) => {
  if (data) {
    console.log(data);
  } else {
    console.error('Failed to load data');
  }
});

在此示例中，requestData 函数接受一个回调函数作为参数，并在请求的响应到达时将响应文本传递给回调。如果发生错误，则传递 null。

回调地狱

当使用多个嵌套回调时，代码容易变得混乱和难以维护。这种情况被称为“回调地狱”，并且可以通过使用 Promise 或 async/await 进行改进。

以下是一个回调嵌套示例，它可能很快变得混乱：

function foo(callback) {
  try {
    const result = doSomething();
    callback(null, result);
  } catch (err) {
    callback(err, null);
  }
}

foo((err, result) => {
  if (err) {
    console.error(err);
  } else {
    bar(result, (err, result) => {
      if (err) {
        console.error(err);
      } else {
        baz(result, (err, result) => {
          if (err) {
            console.error(err);
          } else {
            console.log(result);
          }
        });
      }
    });
  }
});

Promise

Promise 是一种异步编程模型，可用于处理异步操作。Promise 对象表示一个尚未完成的操作，并且提供了一个 then 方法，该方法可以使用回调链式调用。

以下是一个使用 Promise 的示例，其中 fetchData 返回一个 Promise，该 Promise 可以使用 then 处理成功响应或使用 catch 处理错误：

function fetchData() {
  return fetch('/api/data')
    .then((response) => response.json());
}

fetchData()
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.error(err);
  });

在此示例中，fetchData 返回一个 Promise，该 Promise 由 fetch 创建，并在成功时解析响应 JSON。then 方法可以用于处理成功响应，而 catch 方法可以用于处理错误。

async/await

async/await 是一种异步编程模型，它使异步代码看起来更像同步代码。async/await 可以使用 await 关键字暂停异步函数的执行，直到 Promise 解决为止。

以下是一个使用 async/await 的示例，其中 fetchData 是异步函数，并使用 await 等待 fetch 的成功响应：

async function fetchData() {
  const response = await fetch('/api/data');
  return response.json();
}

(async () => {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
})();

在此示例中，fetchData 返回一个 Promise，并使用 await 等待 fetch 的成功响应。异步函数可以使用 try/catch 处理错误，并且在立即调用函数表达式中使用以等待 Promise 解析。