JavaScript的async/awaitasync/await 是 JavaScript 中用于简化异步操作的语法糖

async/await 是 JavaScript 中用于简化异步操作的语法糖，它基于 Promise，但让异步代码看起来更像同步代码，更容易理解和维护。下面我们来详细理解它的工作原理和使用方法。

1. 什么是`async/await` ？

async：用于声明一个异步函数。

- 异步函数会隐式返回一个 Promise 对象。
- 如果函数返回值不是 Promise，它会被自动包装成 Promise.resolve(返回值)。

await：用于等待一个 Promise 的结果。

- await 只能在 async 函数中使用。
- 它会暂停当前 async 函数的执行，直到 Promise 完成（resolve 或 reject）。

2. 基本用法

用 `Promise` 实现异步

function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Data fetched!");
    }, 1000);
  });
}

fetchData().then((data) => {
  console.log(data); // 1秒后输出: Data fetched!
});

用 `async/await` 实现异步

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

async function main() {
  const data = await fetchData();
  console.log(data); // 输出: Data fetched!
}

main();

3. 为什么`async/await` 更好用？

更清晰的代码结构

用 Promise 的链式调用时，代码可能会变得嵌套很深：

fetchData()
  .then((data) => {
    return processData(data);
  })
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);
  });

用 async/await 后，代码更直观：

async function main() {
  try {
    const data = await fetchData();
    const result = await processData(data);
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}
main();

更好的错误处理

async/await 可以用 try/catch 捕获错误，比 Promise.catch 更直观。

4.`async/await` 的工作原理

async 函数：
声明一个异步函数，函数体内可以使用 await。
await 表达式：

- await 会暂停当前 async 函数的执行，直到后面的 Promise 完成。
- 如果 Promise 成功（resolve），await 会返回 resolve 的值。
- 如果 Promise 失败（reject），await 会抛出异常，可以用 try/catch 捕获。

5. 示例代码

示例 1：基本用法

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

async function main() {
  console.log("Start");
  const data = await fetchData(); // 等待 fetchData 完成
  console.log(data); // 输出: Data fetched!
  console.log("End");
}

main();

输出：

Start
Data fetched!
End

示例 2：错误处理

async function fetchData() {
  throw new Error("Failed to fetch data!");
}

async function main() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error.message); // 输出: Failed to fetch data!
  }
}

main();

6. 注意事项

await 只能在async 函数中使用：
如果在普通函数中使用 await，会报语法错误。
async 函数总是返回Promise：
即使函数体内没有 await，它也会返回一个 Promise。

并行执行多个异步任务：
如果需要同时执行多个异步任务，可以用 Promise.all：

async function main() {
  const [result1, result2] = await Promise.all([task1(), task2()]);
  console.log(result1, result2);
}

7. 总结

async/await 是基于 Promise 的语法糖，让异步代码更易读、易写。
async 声明异步函数，await 等待 Promise 完成。
用 try/catch 可以方便地处理错误。
适合需要顺序执行的异步任务，但如果需要并行执行，可以结合 Promise.all 使用。

学会 async/await，你的异步代码会变得更加优雅！🚀

JavaScript的async/await

1. 什么是async/await ？