异步 JavaScript：Promise、Async/Await 和回调

最初发布于Makemychance.com

异步编程是 JavaScript 中的一个核心概念，它允许您在不阻塞其他代码执行的情况下执行任务。当处理需要时间才能完成的操作（例如网络请求、文件 I/O 或计时器）时，这一点变得尤其重要。在本文中，我们将探讨 JavaScript 中处理异步代码的三种主要技术：回调、Promises 和 Async/Await。

1. 回调

回调是 JavaScript 中处理异步操作的最古老的方式。回调只是一个作为参数传递给另一个函数的函数，然后在任务完成后执行该函数。

function fetchData(callback) {
  setTimeout(() => {
    callback("Data received");
  }, 2000);
}

fetchData((message) => {
  console.log(message);
});

在上面的示例中，fetchData 通过 setTimeout 模拟网络请求，回调函数在请求完成后记录消息。

回调地狱

使用回调的缺点之一是臭名昭著的“回调地狱”或“厄运金字塔”，其中多个嵌套回调使代码难以阅读和维护。

fetchData((message) => {
  console.log(message);
  fetchMoreData((moreData) => {
    console.log(moreData);
    fetchEvenMoreData((evenMoreData) => {
      console.log(evenMoreData);
      // And so on...
    });
  });
});

2. 承诺

ES6 中引入的 Promise 提供了一种更简洁的方法来处理异步任务，有助于克服深度嵌套回调的挑战。本质上，promise 是一个对象，它象征着异步操作的结果，无论它成功完成还是失败，并且它提供了一种结构化的方式来处理结果值。

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data received");
    }, 2000);
  });
}

fetchData()
  .then((message) => {
    console.log(message);
    return "Next step";
  })
  .then((nextMessage) => {
    console.log(nextMessage);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

在此示例中，fetchData 返回一个承诺。 .then() 方法用于处理 Promise 的解析值，.catch() 方法用于处理任何错误。

链接承诺

Promise 可以链接起来，使代码更具可读性和可维护性。

fetchData()
  .then((message) => {
    console.log(message);
    return fetchMoreData();
  })
  .then((moreData) => {
    console.log(moreData);
    return fetchEvenMoreData();
  })
  .then((evenMoreData) => {
    console.log(evenMoreData);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

3. 异步/等待

ES8 (2017) 中引入的 Async/Await 是一种构建在 Promise 之上的语法糖，使异步代码的外观和行为更像同步代码。

async function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data received");
    }, 2000);
  });
}

async function processData() {
  try {
    const message = await fetchData();
    console.log(message);
    const moreData = await fetchMoreData();
    console.log(moreData);
    const evenMoreData = await fetchEvenMoreData();
    console.log(evenMoreData);
  } catch (error) {
    console.error("Error:", error);
  }
}

processData();

在此示例中，processData 函数使用await 关键字等待fetchData 返回的promise 得到解析。与 Promise 链相比，这使得代码更干净、更容易遵循。

错误处理

async/await 中的错误处理是使用 try...catch 块完成的，提供了一种直接的方法来处理错误，而不需要 .catch() 方法。

async function processData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error("Error:", error);
  }
}

以上是异步 JavaScript：Promise、Async/Await 和回调的详细内容。更多信息请关注PHP中文网其他相关文章！