ES6～ES14 之 async篇_es async-优快云博客

本文链接：https://blog.youkuaiyun.com/g18642885147/article/details/144673592

在 JavaScript 中，async 是一个非常强大的关键字，用于声明异步函数，使得你能够更方便地处理异步操作。它与 await 配合使用，能够让异步代码看起来更像同步代码，从而简化异步编程的复杂性。

1. 基本用法

async 关键字用于声明一个函数，表示该函数返回一个 Promise 对象，并且可以在函数内部使用 await 来等待异步操作的结果。

// 声明一个 async 函数
async function fetchData() {
  return "Hello, World!";
}

// 调用 async 函数
fetchData().then(result => {
  console.log(result); // 输出: "Hello, World!"
});

async 声明的函数总是返回一个 Promise。
即使你在函数中直接返回一个值，JS 会自动将它包装成一个 Promise 对象。

2. 使用 `await`

await 只能在 async 函数内部使用，它会暂停执行直到 Promise 被解决（fulfilled）或拒绝（rejected）。

async function example() {
  console.log("Start");

  // 等待一个 Promise
  const result = await new Promise(resolve => {
    setTimeout(() => {
      resolve("Resolved after 2 seconds");
    }, 2000);
  });

  console.log(result);  // 输出: "Resolved after 2 seconds"
  console.log("End");
}

example();

在这个例子中，await 会暂停 example 函数的执行，直到 Promise 解决。代码看起来像是同步执行的，但它实际上是异步的。

3. 错误处理

使用 async/await 时，错误处理通常通过 try...catch 来实现，这比传统的 .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();

在这个例子中，try...catch 块用于捕获异步操作中的错误。如果 fetch 或 json() 发生异常，它会被捕捉并输出错误信息。

4. 并发处理

如果你有多个异步操作，并且希望并行处理这些操作，可以使用 Promise.all() 或者 Promise.allSettled()，它们可以等待所有异步任务完成，并返回它们的结果。

async function fetchData() {
  const promise1 = fetch('https://jsonplaceholder.typicode.com/posts/1');
  const promise2 = fetch('https://jsonplaceholder.typicode.com/posts/2');
  
  // 并行执行两个 fetch 请求
  const responses = await Promise.all([promise1, promise2]);

  const data1 = await responses[0].json();
  const data2 = await responses[1].json();

  console.log(data1, data2);
}

fetchData();

在这个例子中，Promise.all() 可以并行执行两个 fetch 请求，它们的结果会在所有请求完成后返回。

5. 异步迭代（`for await...of`）

如果你需要在异步迭代器中使用 async/await，可以使用 for await...of 来循环异步结果。

async function fetchData() {
  const data = [
    Promise.resolve(1),
    Promise.resolve(2),
    Promise.resolve(3),
  ];

  for await (let num of data) {
    console.log(num);
  }
}

fetchData();