JavaScript 异步编程：回调函数、Promise 和 async/await

在 JavaScript 中，异步编程是非常常见的，因为 JavaScript 是一门单线程的语言，无法同时执行多个任务。为了避免阻塞主线程，我们需要使用异步编程来处理耗时的操作，如网络请求、文件读写等。

回调函数

回调函数是 JavaScript 中最早也是最常见的异步编程方式。通过将一个函数作为参数传递给另一个函数，在完成某个任务之后调用这个函数来处理结果。

function fetchData(url, callback) {
  // 模拟网络请求
  setTimeout(() => {
    const data = 'Hello, World!';
    callback(data);
  }, 1000);
}

function handleData(data) {
  console.log(data);
}

fetchData('https://example.com/api', handleData);

这个例子中，fetchData 函数模拟了一个网络请求，并在请求完成后调用了传入的回调函数 handleData 来处理返回的数据。

回调函数的问题在于它们容易导致代码的嵌套和可读性差。当需要多次异步操作时，嵌套的层级将会越来越深，使得代码难以维护和理解，产生所谓的“回调地狱”。

Promise

为了解决回调函数的问题，ES6 引入了 Promise。Promise 是一个代表了异步操作的对象，它可以在未来的某个时间点返回异步操作的结果。

function fetchData(url) {
  return new Promise((resolve, reject) => {
    // 模拟网络请求
    setTimeout(() => {
      const data = 'Hello, World!';
      resolve(data);
    }, 1000);
  });
}

function handleData(data) {
  console.log(data);
}

fetchData('https://example.com/api')
  .then(handleData)
  .catch((error) => {
    console.error(error);
  });

在这个例子中，fetchData 函数返回一个 Promise 对象，通过 resolve 方法将异步操作的结果传递给后续的 .then() 方法，通过 reject 方法将失败的结果传递给 .catch() 方法。

使用 Promise 可以避免回调地狱，将异步操作的结果进行链式处理，使代码更加清晰和易读。

async/await

在 ES7 中引入了 async/await，它是一种基于 Promise 的更高级的异步编程方式。async/await 本身就像是一种写同步代码的方式，但实际上仍然是异步的。

function fetchData(url) {
  return new Promise((resolve, reject) => {
    // 模拟网络请求
    setTimeout(() => {
      const data = 'Hello, World!';
      resolve(data);
    }, 1000);
  });
}

async function getData() {
  try {
    const data = await fetchData('https://example.com/api');
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

getData();

在这个例子中，fetchData 函数返回一个 Promise 对象。在 getData 函数中使用 await 关键字等待 fetchData 函数的结果，然后像同步代码一样进行处理。

虽然 async/await 提供了一种更加简洁和易读的异步编程方式，但它并不适合所有场景，因为它只能在异步函数中使用。

总结

JavaScript 异步编程有三种常见的方式：回调函数、Promise 和 async/await。每种方式都有自己的优缺点，我们可以根据具体的需求选择相应的方式。回调函数是最传统的方式，Promise 可以解决回调地狱问题，而 async/await 则是更加简洁和易读的方式。无论使用哪种方式，我们都应该尽量避免使用同步阻塞主线程的方式来处理耗时的操作。

本文来自极简博客，作者：深海里的光，转载请注明原文链接：JavaScript 异步编程：回调函数、Promise 和 async/await