深入剖析 async/await：用同步思维编写异步代码

2024-02-23 12:41:07

异步编程的挑战

在 JavaScript 中，异步编程是指在不阻塞主线程的情况下执行代码的能力。这对于创建响应迅速的应用程序非常重要，因为阻塞主线程会导致应用程序冻结。

传统的异步编程方法之一是使用回调函数。回调函数是在异步操作完成后执行的函数。例如，以下代码使用回调函数加载图像：

function loadImage(url, callback) {
  const image = new Image();

  image.onload = function() {
    callback(image);
  };

  image.src = url;
}

这种方法的问题在于，它会导致代码难以阅读和维护。当您在代码中使用多个回调函数时，很容易迷失在回调函数的嵌套中。

async/await 的优势

async/await 是一种新的异步编程方法，它允许您使用同步的思维方式编写异步代码。这使得代码更易于阅读和维护。

要使用 async/await，您需要使用 async 标记函数。这将告诉 JavaScript 引擎，该函数是异步的。您还可以在函数中使用 await 关键字来等待异步操作完成。

例如，以下代码使用 async/await 加载图像：

async function loadImage(url) {
  const image = new Image();

  const response = await fetch(url);
  const blob = await response.blob();
  const objectURL = URL.createObjectURL(blob);

  image.src = objectURL;

  return image;
}

使用 async/await，您可以在不使用回调函数的情况下编写异步代码。这使得代码更易于阅读和维护。

async/await 与 Promise

async/await 与 Promise 密切相关。Promise 是一个对象，它表示异步操作的最终结果。您可以使用 then() 方法来处理 Promise。

例如，以下代码使用 Promise 加载图像：

function loadImage(url) {
  return new Promise((resolve, reject) => {
    const image = new Image();

    image.onload = function() {
      resolve(image);
    };

    image.onerror = function() {
      reject(new Error('Error loading image'));
    };

    image.src = url;
  });
}

您可以使用 async/await 来简化 Promise 的使用。例如，以下代码使用 async/await 加载图像：

async function loadImage(url) {
  const response = await fetch(url);
  const blob = await response.blob();
  const objectURL = URL.createObjectURL(blob);

  return new Promise((resolve, reject) => {
    const image = new Image();

    image.onload = function() {
      resolve(image);
    };

    image.onerror = function() {
      reject(new Error('Error loading image'));
    };

    image.src = objectURL;
  });
}