向优秀的开源库转变：使用 ES11 async 和 await 重构 callback-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要处理异步操作，例如从后端请求数据、读取本地文件等等。在过去，我们通常使用回调函数来处理这些异步操作，但是回调函数的嵌套会导致代码难以维护和理解。ES6 引入了 Promise 对象来解决这个问题，但是在 ES11 中，我们可以使用更加简洁和直观的 async 和 await 语法来处理异步操作。

什么是 async 和 await

async 和 await 是 ES11 中引入的两个新关键字，它们可以让我们更加方便地处理异步操作。async 关键字用于声明一个异步函数，这个函数会自动返回一个 Promise 对象。而 await 关键字可以在异步函数中等待一个 Promise 对象的完成，并返回 Promise 对象的结果。

下面是一个简单的示例，使用 async 和 await 来读取本地文件：

// javascriptcn.com 代码示例
async function readFile(filePath) {
  const file = await fetch(filePath);
  const text = await file.text();
  return text;
}

readFile("example.txt").then((text) => {
  console.log(text);
});

在这个示例中，我们定义了一个异步函数 readFile，它会等待一个 Promise 对象的完成。在函数体中，我们使用了两个 await 关键字，分别等待 fetch 和 text 方法的完成。最后，函数返回读取到的文本内容，并通过 Promise 对象传递给调用者。我们可以通过调用 then 方法来获取异步函数返回的结果。

为什么要使用 async 和 await

使用 async 和 await 可以让我们更加方便地处理异步操作，避免了回调函数的嵌套和错误处理的问题。下面是一个使用回调函数的示例：

// javascriptcn.com 代码示例
function fetchUser(userId, callback) {
  fetch(`/api/user/${userId}`, (err, data) => {
    if (err) {
      callback(err);
    } else {
      fetch(`/api/user/${data.friendId}`, (err, friendData) => {
        if (err) {
          callback(err);
        } else {
          callback(null, {
            user: data,
            friend: friendData,
          });
        }
      });
    }
  });
}

fetchUser(123, (err, result) => {
  if (err) {
    console.error(err);
  } else {
    console.log(result);
  }
});

在这个示例中，我们定义了一个 fetchUser 函数来获取用户信息和他的朋友信息。由于 fetch 函数是异步的，我们需要使用回调函数来处理异步操作。但是由于需要嵌套多个回调函数，代码变得非常难以维护和理解。

使用 async 和 await 可以让我们避免这个问题，使代码更加简洁和直观：

// javascriptcn.com 代码示例
async function fetchUser(userId) {
  const data = await fetch(`/api/user/${userId}`);
  const friendData = await fetch(`/api/user/${data.friendId}`);
  return {
    user: data,
    friend: friendData,
  };
}

fetchUser(123).then((result) => {
  console.log(result);
}).catch((err) => {
  console.error(err);
});

在这个示例中，我们使用了 async 和 await 关键字来处理异步操作，避免了回调函数的嵌套。我们可以通过调用 then 方法来获取异步函数返回的结果，也可以使用 catch 方法来处理异步函数抛出的异常。

如何使用 async 和 await

使用 async 和 await 可以让我们更加方便地处理异步操作，但是在实际开发中，我们需要注意一些细节。

错误处理

在异步函数中，如果出现了错误，我们可以使用 try-catch 语句来捕获异常：

// javascriptcn.com 代码示例
async function fetchUser(userId) {
  try {
    const data = await fetch(`/api/user/${userId}`);
    const friendData = await fetch(`/api/user/${data.friendId}`);
    return {
      user: data,
      friend: friendData,
    };
  } catch (err) {
    console.error(err);
    throw err;
  }
}

在这个示例中，我们使用 try-catch 语句来捕获异步函数中的异常，并通过 throw 关键字将异常抛出。调用者可以通过 catch 方法来获取异常信息。

并行执行

在异步函数中，如果有多个异步操作可以并行执行，我们可以使用 Promise.all 方法来并行执行这些操作：

async function fetchUsers(userIds) {
  const promises = userIds.map((userId) => fetch(`/api/user/${userId}`));
  const results = await Promise.all(promises);
  return results;
}

在这个示例中，我们使用 Promise.all 方法来并行执行多个异步操作。Promise.all 方法返回一个 Promise 对象，它会在所有异步操作完成后返回一个数组，包含每个异步操作的结果。

避免阻塞

在异步函数中，如果有一个异步操作的结果依赖于另一个异步操作的结果，我们可以在等待第一个异步操作的同时开始执行第二个异步操作，避免阻塞：

// javascriptcn.com 代码示例
async function fetchUser(userId) {
  const dataPromise = fetch(`/api/user/${userId}`);
  const friendPromise = dataPromise.then((data) => fetch(`/api/user/${data.friendId}`));
  const [data, friendData] = await Promise.all([dataPromise, friendPromise]);
  return {
    user: data,
    friend: friendData,
  };
}

在这个示例中，我们首先发起一个异步操作，获取用户的信息。然后，我们使用 then 方法在获取用户信息的同时开始获取他的朋友的信息。最后，我们使用 Promise.all 方法等待这两个异步操作的完成，并返回它们的结果。

总结

使用 async 和 await 可以让我们更加方便地处理异步操作，避免了回调函数的嵌套和错误处理的问题。在实际开发中，我们需要注意错误处理、并行执行和避免阻塞等细节。通过使用 async 和 await，我们可以将代码变得更加简洁和直观，提高代码的可维护性和可读性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65574efdd2f5e1655d1bb319