ES8中 async 和await的用法详细的总结

async 和 await 是 ES8（ECMAScript 2017）引入的两个关键字，用于处理异步操作。它们基于 Promise，使得异步代码的编写和阅读变得更加简洁和直观。通过这两个关键字，开发者可以避免回调地狱（callback hell），以同步的方式编写异步代码。

1. async 函数

async 是一个关键字，用于声明一个异步函数。异步函数返回一个 Promise，它的返回值会被 Promise.resolve() 包裹。如果函数内部抛出错误，它会被自动转换为 Promise 的拒绝状态（rejected）。

1.1 声明 async 函数

async function myFunction() {
  return "Hello, World!";
}
myFunction().then(result => console.log(result));  // "Hello, World!"

async 表示该函数是异步函数，函数返回值将会是一个 Promise。
在这个例子中，myFunction 函数返回的是一个 Promise，其值为 “Hello, World!”。

1.2 异常处理

async 函数内部的错误会被自动包装为 Promise 的拒绝，使用 .catch() 或 try/catch 可以捕获这些错误。

async function myFunction() {
  throw new Error("Something went wrong");
}

myFunction().catch(err => console.log(err.message));  // "Something went wrong"

2. await 关键字

await 只能在 async 函数内部使用。它用于等待一个 Promise 对象的解决（resolve）或拒绝（reject），并且它会暂停 async 函数的执行，直到 Promise 完成。

2.1 基本用法

async function myFunction() {
  let result = await someAsyncTask();
  console.log(result);
}

await 会等待 someAsyncTask() 完成，然后将结果赋值给 result，再继续执行后续的代码。

2.2 异步操作的顺序控制

await 会确保异步操作按顺序执行，而不需要使用多个 then() 链式调用。这样写异步代码更像是同步代码。

async function fetchData() {
  const data1 = await fetch('https://api.example.com/data1');
  const data2 = await fetch('https://api.example.com/data2');
  console.log(data1, data2);
}

上面这段代码会依次等待 data1 和 data2 的结果。在 data1 请求完成后，才会发起 data2 请求。

2.3 await 与 Promise.all()

如果你需要并行执行多个异步操作，可以使用 Promise.all() 来加速异步任务的执行，await 与 Promise.all() 配合使用，所有 Promise 会并行执行，等待所有任务完成。

async function fetchData() {
  const [data1, data2] = await Promise.all([
    fetch('https://api.example.com/data1'),
    fetch('https://api.example.com/data2')
  ]);
  console.log(data1, data2);
}

这段代码会并行请求 data1 和 data2，等待两个请求都完成后再继续执行。

3. async 和 await 的常见应用

3.1 顺序执行异步任务

如果有多个异步任务需要按顺序执行，可以通过 await 来保证每个任务依次执行。

async function taskSequence() {
  const task1 = await doTask1();
  const task2 = await doTask2();
  const task3 = await doTask3();
  console.log(task1, task2, task3);
}

3.2 错误处理

使用 try/catch 块来捕获异步函数中的错误。

async function fetchData() {
  try {
    const data = await fetch('https://api.example.com/data');
    const json = await data.json();
    console.log(json);
  } catch (error) {
    console.log('Error:', error);
  }
}

如果 fetch 或 json 方法发生错误，catch 会捕获并处理错误。

3.3 使用 async 和 await 实现异步返回值

异步函数可以返回一个 Promise，await 会暂停代码执行，直到 Promise 完成并返回结果。

async function add(a, b) {
  return a + b;
}

async function main() {
  const result = await add(1, 2);
  console.log(result); // 3
}
main();

add 函数返回的是 Promise，await 会等待它完成，并返回加法结果。

3.4 使用 async 和 await 获取多个 API 请求

当你需要从多个 API 获取数据时，可以使用 async 和 await 来简化代码：

async function getUserData() {
  try {
    const user = await fetch('https://api.example.com/user');
    const userData = await user.json();

    const posts = await fetch('https://api.example.com/posts');
    const postsData = await posts.json();

    console.log(userData, postsData);
  } catch (error) {
    console.error('Error:', error);
  }
}

async/await 使得多个异步请求的代码更清晰，避免了传统回调地狱的问题。

4. async 和 await 的限制

await 只能在 async 函数内部使用：await 不能直接在普通函数或顶层作用域中使用，必须在 async 函数中。

// 错误
const result = await fetch('https://example.com'); // SyntaxError

// 正确
async function fetchData() {
  const result = await fetch('https://example.com');
}

await 等待 Promise：await 只会等待 Promise 对象，其他类型的值（如数字、字符串）将立即返回。

async function test() {
  const result = await 42;
  console.log(result); // 42，直接返回值
}

5. 总结

• async：声明异步函数，函数会返回一个 Promise。
• await：等待 Promise 的结果，能够暂停 async 函数的执行，直到 Promise 完成。
• async/await 使得异步代码更加简洁、可读，避免了回调地狱。
• 在处理多个异步操作时，await 可以与 Promise.all() 配合使用，实现并行执行。
• 异常处理使用 try/catch，更易于捕获和处理异步代码中的错误。
• 通过 async 和 await，你可以像编写同步代码一样编写异步代码，使代码更加简洁、易于维护和调试。