async和await是什么 - Tigshop开源商城

`async` 和 `await` 简介

async 和 await 是 JavaScript 中用于处理异步操作的关键字，它们简化了异步代码的编写和理解。通过使用 async 和 await，你可以写出更清晰、更易读的异步代码，而不需要依赖回调函数或复杂的 Promise 链。

语法

async 函数:
- 将一个函数标记为异步函数，该函数会自动返回一个 Promise。
- 在 async 函数内部，你可以使用 await 来等待一个 Promise 的完成。
await 表达式:
- 只能在 async 函数内部使用。
- await 会让代码暂停执行，直到 Promise 被解决（resolved）或拒绝（rejected），然后继续执行后续代码。
- 如果 Promise 被解决，await 会返回 Promise 的结果；如果被拒绝，await 会抛出错误。

基本用法

// 定义一个 async 函数
async function fetchData() {
  try {
    // 使用 await 等待一个 Promise 完成
    const response = await fetch('https://api.example.com/data');
    const data = await response.json(); // 等待 JSON 解析完成
    console.log(data); // 处理获取到的数据
  } catch (error) {
    console.error('请求失败:', error); // 捕获并处理错误
  }
}

// 调用 async 函数
fetchData();

`async` 和 `await` 的优势

更简洁的代码:
- 相比于传统的 Promise 链或回调函数，async 和 await 让异步代码看起来更像同步代码，减少了嵌套和回调地狱的问题。
更好的错误处理:
- 使用 try...catch 可以更方便地捕获和处理异步操作中的错误，而不必为每个 Promise 都写 .catch()。
更容易调试:
- 由于 async 和 await 使得代码更线性化，调试工具可以更好地跟踪异步代码的执行流程。
支持并发操作:
- 虽然 await 会让代码暂停执行，但你仍然可以使用 Promise.all() 等方法来并发执行多个异步操作。

并发操作示例

async function fetchMultipleResources() {
  try {
    // 并发请求多个资源
    const [users, posts, comments] = await Promise.all([
      fetch('https://api.example.com/users').then(res => res.json()),
      fetch('https://api.example.com/posts').then(res => res.json()),
      fetch('https://api.example.com/comments').then(res => res.json())
    ]);

    console.log('Users:', users);
    console.log('Posts:', posts);
    console.log('Comments:', comments);
  } catch (error) {
    console.error('请求失败:', error);
  }
}

fetchMultipleResources();

错误处理

async 函数中的 await 会将 Promise 的拒绝状态转换为抛出的错误，因此你可以使用 try...catch 来捕获这些错误：

async function fetchDataWithErrorHandling() {
  try {
    const response = await fetch('https://api.example.com/non-existent-endpoint');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error.message);
  }
}

fetchDataWithErrorHandling();

注意事项

await 只能在 async 函数中使用:
- 如果你在非 async 函数中使用 await，会导致语法错误。
await 会阻塞当前函数的执行:
- await 会让代码暂停执行，直到 Promise 完成。如果你不希望阻塞代码，可以考虑使用 Promise.all() 或其他并发方法。
不要滥用 async 和 await:
- 虽然 async 和 await 让代码更易读，但并不是所有异步操作都需要使用它们。对于简单的 Promise 链，直接使用 .then() 和 .catch() 也完全可以。

总结

async 和 await 是现代 JavaScript 中处理异步操作的强大工具，它们让异步代码更加简洁、易读，并且提供了更好的错误处理机制。通过合理使用 async 和 await，你可以编写出更优雅、更可靠的异步代码。

希望这个介绍对你理解 async 和 await 有所帮助！

async 和 await 简介

语法