JavaScript进阶教程- Async/Await的实践和错误处理

async/await 是一种处理异步操作的现代JavaScript语法，它让异步代码看起来和同步代码更为相似，从而使得代码更加简洁易读。它建立在Promise之上，但提供了一种更直接的方式来处理异步函数的返回值和异常。

Async/Await的实践

1. async 关键字：用于声明一个异步函数，这个函数会返回一个Promise。

   async function fetchData() {
       return "Data fetched";
   }
   

   在这个例子中，即使没有显式返回一个Promise，fetchData 函数仍然返回一个解析为字符串 “Data fetched” 的Promise。

2. await 关键字：用于等待Promise解析。它只能在async函数内部使用。await会暂停async函数的执行，等待Promise解析，然后继续执行async函数并返回解析的值。

   async function showData() {
       const data = await fetchData(); // 假设 fetchData 返回一个 Promise
       console.log(data); // "Data fetched"
   }
   

   在这个例子中，showData 函数等待 fetchData 的Promise解析，然后打印出结果。

错误处理

在使用async/await时，错误处理变得非常直观，可以使用传统的try/catch语句捕获异常。

async function fetchWithErrorHandling() {
    try {
        const data = await fetchData(); // 假设 fetchData 有可能拒绝
        console.log(data);
    } catch (error) {
        console.error('An error occurred:', error);
    }
}

在这个例子中，如果fetchData返回的Promise被拒绝，await表达式会抛出异常，这个异常会被catch块捕获，从而允许你处理错误。

使用注意事项

• 当在async函数中使用await时，JavaScript运行时会暂停该函数的执行，直到等待的Promise解析。这意味着在处理许多独立的Promise时，应该考虑并发执行以避免不必要的等待。可以使用Promise.all()来并发处理多个Promise。

  async function fetchMultipleData() {
      const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
      console.log(data1, data2);
  }
  

• 虽然async/await使异步代码更易于理解和维护，但过度使用也可能导致性能问题，特别是在不恰当地串行化本可以并发执行的操作时。

async/await 提供了一种更加直观和强大的方式来处理JavaScript中的异步操作，使得代码更加简洁且易于维护。通过结合try/catch进行错误处理，可以有效地捕获并处理异步操作中可能出现的异常。