如何使用 await 进行控制台 - Javascript

在开发 JavaScript 应用程序时，使用异步编程技术可以使代码在不阻塞主线程的情况下与外部资源交互。JavaScript 提供了一个关键字 await，可以用来等待异步调用的完成。在本教程中，我们将介绍如何在 JavaScript 中使用 await。

1. await 关键字的基础用法

在声明函数时，可以使用 async 关键字将其标记为一个异步函数。如果函数中的一部分需要等待异步调用的结果，则可以使用 await 关键字让该函数在等待异步调用结束后继续执行。

async function getUserData(userId) {
  const response = await fetch(`/users/${userId}`);

  if (!response.ok) {
    throw new Error(`Failed to get data for user with ID ${userId}.`);
  }

  const userData = await response.json();

  return userData;
}

getUserData(123)
  .then(userData => console.log(userData))
  .catch(error => console.error(error));

在上面的代码示例中，我们声明了一个异步函数 getUserData，它接受一个参数 userId。在函数内部，我们调用了 fetch 方法来获取用户数据。由于 fetch 方法也是异步的，因此我们需要使用 await 来等待其结果。如果 API 返回一个错误状态码，则会抛出一个错误。否则，我们使用 response.json() 来提取响应体中的数据，也需要使用 await 关键字。

最后，我们在 getUserData 函数中返回了用户数据。在调用 getUserData 函数时，我们可以使用 Promise API 来处理函数的结果。如果请求未正常处理，则会捕获异常并打印错误信息。

2. 处理多个异步调用的结果

有时，一个函数需要等待多个异步调用完成后才能返回结果。在这种情况下，我们可以使用 Promise.all 方法来等待所有异步调用完成。

async function getMultipleUserData(userIds) {
  const promises = [];

  for (const userId of userIds) {
    const promise = fetch(`/users/${userId}`);

    promises.push(promise);
  }

  const responses = await Promise.all(promises);

  const result = [];

  for (const response of responses) {
    if (!response.ok) {
      throw new Error(`Failed to get data for user with ID ${userId}.`);
    }

    const userData = await response.json();

    result.push(userData);
  }

  return result;
}

getMultipleUserData([123, 456, 789])
  .then(userData => console.log(userData))
  .catch(error => console.error(error));

在上面的代码示例中，我们定义了一个异步函数 getMultipleUserData，它接受一个数组 userIds，该数组包含多个用户 ID。在函数内部，我们循环遍历该数组，并使用 fetch 方法获取每个用户的数据。我们将所有 fetch 方法的结果存储在一个数组 promises 中。

接下来，我们使用 Promise.all 方法等待所有异步调用完成。Promise.all 方法返回一个数组，该数组包含每个异步调用的结果。在本例中，我们期望结果是一个数组，其中每个元素都是从某个用户 ID 获取的数据。我们将 Promise.all 的结果存储在 responses 中。

最后，我们循环遍历每个响应并提取其中的数据。我们将每个用户的数据存储在一个数组 result 中，并在函数的结尾处返回 result。在调用 getMultipleUserData 函数时，我们可以处理 Promise 的结果，就像处理 getUserData 函数的结果一样。

3. 使用 async/await 处理回调函数

如果您使用的是现代 JavaScript 框架或库，那么您可能已经熟悉了使用回调函数来处理异步调用的模式。在某些情况下，您可能希望使用 await 关键字来优化回调函数的逻辑。下面是一个使用 async/await 处理回调函数的示例：

async function readFromFile(path) {
  const fileHandle = await window.showOpenFilePicker();
  const file = await fileHandle[0].getFile();

  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    reader.onload = () => {
      resolve(reader.result);
    };

    reader.onerror = () => {
      reject(reader.error);
    };

    reader.readAsText(file);
  });
}

readFromFile('path/to/file')
  .then(data => console.log(data))
  .catch(error => console.error(error));

在上面的代码示例中，我们定义了一个异步函数 readFromFile，它接受一个参数 path。该函数使用 window.showOpenFilePicker() 方法打开文件选择器，并使用 await 关键字等待用户选择文件。然后，我们使用 getFile() 方法获取文件。

接下来，我们使用 Promise 构造函数来处理 FileReader 对象的回调函数。我们定义了一个 reader 实例，并设置了 reader.onload 和 reader.onerror 回调函数。在 reader.onload 回调函数中，我们使用 reader.result 属性将文件内容作为字符串返回。如果出现错误，我们将 reader.error 传递给 Promise 的 reject 函数。

最后，我们在函数的结尾处返回 Promise 对象。在调用 readFromFile 函数时，我们可以使用 Promise API 处理函数的结果。如果读取文件时出现错误，则会抛出异常并打印错误信息。

结论

在 JavaScript 中，使用 await 关键字可以帮助您优化异步代码的结构和可读性。通过等待异步调用完成，您可以通过更加直观和简单的方式处理数据或错误。使用 async/await，您可以以更具实用性的方式使用 Promise API。当然，虽然 await 提供了另一种等待异步请求的方法，但是请注意，await 只能在异步函数中使用。