如何使用async/await处理异步

JavaScript中的async/awAIt 是处理异步操作的一种现代且优雅的方式。它允许使用更接近同步代码的方式来书写异步代码，从而提高代码的可读性与可维护性。它们是基于Promises来工作的、可以解放我们从回调函数地狱中释放出来、让异步代码更加直观易懂。使用async关键字声明的函数意味着该函数的执行将返回一个Promise对象。而await关键字可以用于等待一个Promise解决（resolve）或拒绝（reject）。只有在async函数内部才能使用await关键字。

在展开之前，我们理解async/await的原理是非常重要的。一个以async声明的函数总是返回一个Promise对象，即使你没有明确地返回一个Promise。如果一个值被返回，它将自动被Promise.resolve()包装成一个解决（fulfilled）状态的Promise。这允许你以同步的方式书写代码来等待异步操作的结果。await关键字在表面上会阻塞代码的执行，直到等待的Promise被解决或拒绝。然而，实际上它并不是真的阻塞线程，而是一种语法糖，底层实现依然是非阻塞的。

一、ASYNC/AWAIT基础

定义Async函数

Async函数可以由async关键字来定义。这个关键字可以用在函数声明、函数表达式、箭头函数前面。

// 函数声明
async function fetchData() {
  // ...
}
// 函数表达式
const fetchData = async function() {
  // ...
}
// 箭头函数
const fetchData = async () => {
  // ...
}

使用Await表达式

在async函数内部，可以使用await表达式来等待一个Promise解决。这个表达式会暂停async函数的执行，直到Promise的状态变成解决（fulfilled）或拒绝（rejected）。

async function fetchData() {
  let data = await someAsyncOperation();
  console.log(data);
  // 此处有更多逻辑
}

二、错误处理

在使用async和await时，错误处理是至关重要的，与传统的try/catch语句不谋而合。

使用Try/Catch

当在await表达式中的Promise被拒绝（rejected）时，它将抛出异常，可以使用try/catch语句来处理这些异常。

async function fetchData() {
  try {
    let data = await someAsyncOperation();
    console.log(data);
  } catch (error) {
    console.error('An error occurred:', error);
  }
}

错误的传递

在async函数中，如果你不处理错误，它们会被传递给返回的Promise，因此你可以在调用函数时使用catch来处理这些错误。

fetchData().catch(error => {
  console.error('An error occurred:', error);
});

三、并行处理

在处理多个异步任务的时候，我们通常希望并行处理以节省时间。

使用Promise.all

使用Promise.all()可以同时开始多个异步操作，并等待所有操作完成。

async function fetchMultipleData() {
  try {
    let [firstResponse, secondResponse] = await Promise.all([
      fetchFirstData(),
      fetchSecondData(),
    ]);
    console.log(firstResponse, secondResponse);
  } catch (error) {
    console.error('An error occurred:', error);
  }
}

注意并行操作的陷阱

当使用Promise.all()时，如果其中一个Promise被拒绝，所有其他的Promise都会被忽略，即使它们已经或即将解决。这一点需要特别留意。

四、异步迭代

处理异步操作数组时，async/await也能大显身手。

使用For…Of循环

You can process a list of asynchronous operations in sequence using a for…of loop along with await.

async function processItems(items) {
  for (let item of items) {
    await processItem(item); // Wait for the item to be processed before continuing
  }
}

使用Array.map与Promise.all

如果想要并行处理列表中的每个项目，可以结合使用Array.map()和Promise.all()。

async function processItems(items) {
  await Promise.all(items.map(async (item) => {
    await processItem(item);
  }));
}

五、ASYNC/AWAIT与传统PROMISES比较

了解async/await与传统Promise使用上的不同能够帮助我们做出合适的选择。

可读性与结构

Async/await的最大优势可能在于提高代码的可读性。传统的Promise链可能会因深层次的.then()调用而变得难以阅读和维护。

// 使用async/await
async function fetchData() {
  let data = await someAsyncOperation();
  let moreData = await anotherAsyncOperation(data);
  console.log(moreData);
}
// 使用Promises
function fetchData() {
  someAsyncOperation()
    .then(data => anotherAsyncOperation(data))
    .then(moreData => console.log(moreData))
    .catch(error => console.error(error));
}