什么是 async/await 以及它如何简化异步代码？

TL;DR

async/await 是 JavaScript 中一种现代语法，它简化了处理 Promise 的过程。通过在函数前使用 async 关键字，你可以在该函数中使用 await 关键字来暂停执行，直到 Promise 被解析。这使得异步代码看起来更像同步代码，并且行为也更像同步代码，从而更容易阅读和维护。

async function fetchData() {
  try {
    const response = await fetch(
      'https://jsonplaceholder.typicode.com/posts/1',
    );
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}
fetchData();

什么是 async/await 以及它如何简化异步代码？

async/await 简介

async/await 是 ECMAScript 2017 (ES8) 中引入的一个特性，它允许你以更像同步的方式编写异步代码。它建立在 Promise 的基础上，并提供了一种更清晰、更易读的方式来处理异步操作。

使用 `async` 关键字

async 关键字用于声明一个异步函数。当一个函数被声明为 async 时，它会自动返回一个 Promise。这意味着你可以在其中使用 await 关键字来暂停函数的执行，直到 Promise 被解析。

async function exampleFunction() {
  return 'Hello, World!';
}

exampleFunction().then(console.log); // Output: Hello, World!

使用 `await` 关键字

await 关键字只能在 async 函数中使用。它会暂停函数的执行，直到 Promise 被解析，然后返回解析后的值。如果 Promise 被拒绝，它会抛出一个错误，可以使用 try...catch 块捕获该错误。

async function fetchData() {
  try {
    const response = await fetch(
      'https://jsonplaceholder.typicode.com/posts/1',
    );
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}
fetchData();

简化异步代码

在 async/await 之前，处理异步操作通常涉及链接多个 .then() 调用，这可能导致“回调地狱”或“金字塔式厄运”。async/await 扁平化了这种结构，使代码更易读，更易于维护。

使用 Promise 的示例

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error('Error fetching data:', error);
  });

使用 async/await 的示例

async function fetchData() {
  try {
    const response = await fetch(
      'https://jsonplaceholder.typicode.com/posts/1',
    );
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}
fetchData();

错误处理

与 Promise 相比，使用 async/await 进行错误处理更直接。你可以使用 try...catch 块来处理错误，使代码更清晰、更直观。

async function fetchData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicod.com/posts/1'); // Typo in URL
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}
fetchData();

什么是 async/await 以及它如何简化异步代码？

TL;DR