等一下！深入async/await的异步世界

最新推荐文章于 2024-05-11 21:19:51 发布

TechWJ

最新推荐文章于 2024-05-11 21:19:51 发布

阅读量177

点赞数 7

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_68390957/article/details/134406676

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

等一下！深入async/await的异步世界

前言

前言

在JavaScript中，异步操作是家常便饭。回调地狱（Callback Hell）曾是开发者们的噩梦，而Promise的引入带来了一些改善。然而，async/await的出现使得异步代码的编写更加像同步代码一样直观、简洁。通过这篇博客，我们将深入探讨async/await的奇妙之处，以及如何在实际开发中充分利用它，让你的代码更加优雅。
在这里插入图片描述

基础用法

async 函数和 await 关键字是 ECMAScript 2017（ES8）引入的一种处理异步操作的机制。它们用于更简洁地处理异步代码，使得异步操作的编写和阅读更加直观。

`async` 函数：

async 函数是返回一个 Promise 对象的函数。使用 async 关键字声明的函数可以包含 await 关键字，该关键字用于等待一个 Promise 对象解析完成。在 async 函数内部，可以像写同步代码一样去编写异步代码。

async function myAsyncFunction() {
  return 42;
}

`await` 关键字：

await 关键字只能在 async 函数中使用。它用于等待一个 Promise 对象的解决，然后暂停该 async 函数的执行，直到 Promise 解析完成并返回结果。

async function fetchData() {
  let response = await fetch('https://api.example.com/data');
  let data = await response.json();
  return data;
}

在上述例子中，await fetch('https://api.example.com/data') 等待 fetch 函数返回的 Promise 对象解析，然后再继续执行下一行代码。这样，我们可以避免使用传统的回调或 Promise 链式调用，使得异步代码看起来更像同步代码。

协同工作：

async 函数返回 Promise： 所有的 async 函数都返回一个 Promise 对象，该 Promise 对象的最终状态由 async 函数的返回值决定。
```
async function myAsyncFunction() {
  return 42;
}

myAsyncFunction().then(result => {
  console.log(result); // 输出 42
});
```
await 内部处理 Promise： 在 await 关键字后面的表达式通常是一个返回 Promise 对象的异步操作。await 暂停函数的执行，直到该 Promise 解析完成，并返回 Promise 解析的结果。
```
async function fetchData() {
  let response = await fetch('https://api.example.com/data');
  let data = await response.json();
  return data;
}
```

错误处理： 使用 try-catch 块可以方便地捕获 async 函数中的异步操作中的错误。

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

async 函数和 await 关键字简化了异步代码的编写，使得代码更具可读性和可维护性。这种方式更贴近同步编程的风格，同时保持了异步的非阻塞特性。

比较`async/await`与Promise的区别，以及如何选择使用

async/await 是建立在 Promise 之上的一种更高级的异步编程语法。让我们比较一下它们之间的区别，并讨论在不同场景下应该如何选择使用。

区别：

语法：

Promise： 使用 .then() 和 .catch() 处理异步操作。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

async/await： 使用 async 函数和 await 关键字，更接近同步代码的风格。

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

fetchData();

错误处理：
- Promise： 使用 .catch() 来捕获 Promise 链中的错误。
- async/await： 使用 try-catch 块来捕获异步操作中的错误，使错误处理更直观。
可读性：
- Promise： Promise 链可能会形成较深的嵌套结构，有时可读性较差。
- async/await： 使用 await 关键字，代码更线性、更易读。

选择使用场景：

Promise 适用场景：

当处理一个单独的异步操作时，使用 Promise 可以足够简洁。
当你需要更多的控制权来处理异步操作链，或者需要执行一些特殊的操作，Promise 可以提供更多灵活性。

function fetchData() {
  return new Promise((resolve, reject) => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => resolve(data))
      .catch(error => reject(error));
  });
}

async/await 适用场景：

当处理多个异步操作，特别是它们之间有依赖关系时，async/await 可以显著提高可读性。
当需要更直观的错误处理时，async/await 通过 try-catch 块更方便。

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

总体而言，async/await 提供了更清晰、更直观的异步代码编写方式，特别适用于处理多个异步操作的情况。在简单的异步场景中，Promise 也是一个有效的选择。在实际应用中，可以根据项目的需求和开发团队的偏好来选择使用。

有效地处理异步操作中的错误

在 async/await 中，错误处理主要通过使用 try-catch 块来实现。以下是一些关于如何有效地处理异步操作中的错误的建议：

1. 使用 `try-catch` 块：

async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    let data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
    // 可以选择抛出新的错误或者返回一个默认值
    throw new Error('Failed to fetch data');
  }
}

2. 抛出新的错误或返回默认值：

在 catch 块中，你可以选择抛出新的错误，也可以返回一个默认值，这取决于你的业务逻辑。抛出新的错误可以让调用方更容易识别问题所在，而返回默认值则可能使应用继续运行而不中断。

async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    let data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
    // 抛出新的错误
    throw new Error('Failed to fetch data');
    // 或者返回默认值
    return [];
  }
}

3. Promise 的 `catch` 方法：

如果你的 async 函数返回的 Promise 被外部调用，你也可以使用 Promise 的 catch 方法来捕获错误。

fetchData()
  .then(data => {
    // 处理数据
  })
  .catch(error => {
    console.error('External catch:', error);
    // 处理错误
  });

4. 多个异步操作的错误处理：

如果有多个异步操作，可以使用多个 try-catch 块，或者结合 Promise.all 来处理多个异步操作的错误。

async function fetchData() {
  try {
    let response1 = await fetch('https://api.example.com/data1');
    let data1 = await response1.json();

    let response2 = await fetch('https://api.example.com/data2');
    let data2 = await response2.json();

    return { data1, data2 };
  } catch (error) {
    console.error('Error:', error);
    throw new Error('Failed to fetch data');
  }
}

通过这些方法，你可以更有效地处理异步操作中的错误，并根据具体场景采取合适的错误处理策略。

使用`async/await`实现串行和并行的异步操作

在异步编程中，串行表示按照顺序执行多个异步操作，一个完成后再执行下一个；而并行表示同时执行多个异步操作。使用 async/await 可以很方便地实现这两种方式。以下是示例代码：

串行执行异步操作：

async function serialAsyncOperations() {
  try {
    const result1 = await asyncOperation1();
    console.log(result1);

    const result2 = await asyncOperation2();
    console.log(result2);

    const result3 = await asyncOperation3();
    console.log(result3);

    // 所有操作完成后，可以进行其他操作
    console.log('All operations completed!');
  } catch (error) {
    console.error('Error:', error);
  }
}

// 模拟异步操作
function asyncOperation1() {
  return new Promise(resolve => setTimeout(() => resolve('Operation 1'), 1000));
}

function asyncOperation2() {
  return new Promise(resolve => setTimeout(() => resolve('Operation 2'), 1000));
}

function asyncOperation3() {
  return new Promise(resolve => setTimeout(() => resolve('Operation 3'), 1000));
}

serialAsyncOperations();

并行执行异步操作：

async function parallelAsyncOperations() {
  try {
    const [result1, result2, result3] = await Promise.all([
      asyncOperation1(),
      asyncOperation2(),
      asyncOperation3()
    ]);

    console.log(result1);
    console.log(result2);
    console.log(result3);

    // 所有操作完成后，可以进行其他操作
    console.log('All operations completed!');
  } catch (error) {
    console.error('Error:', error);
  }
}

// 模拟异步操作
function asyncOperation1() {
  return new Promise(resolve => setTimeout(() => resolve('Operation 1'), 1000));
}

function asyncOperation2() {
  return new Promise(resolve => setTimeout(() => resolve('Operation 2'), 1000));
}

function asyncOperation3() {
  return new Promise(resolve => setTimeout(() => resolve('Operation 3'), 1000));
}

parallelAsyncOperations();

在并行执行异步操作时，使用 Promise.all 可以同时启动多个异步操作，并在它们都完成时获得结果。在串行执行异步操作时，使用 await 关键字确保按照顺序执行异步操作。这两种方式可以根据具体的需求选择使用。

`try/catch`语法糖

在 JavaScript 中，try/catch 结构通常用于处理同步代码中的异常，但对于异步代码，try/catch 并不能直接捕获异步操作中的异常。为了优雅地处理异步代码中的异常，可以使用一些语法糖或辅助函数。以下是其中一些方法：

1. 使用 `async/await`：

通过在异步函数中使用 try/catch 结构，可以有效地捕获异步代码中的异常。这是因为 async/await 的语法可以使异步代码看起来像同步代码一样。

async function example() {
  try {
    const result = await asyncOperation();
    console.log(result);
  } catch (error) {
    console.error('Error:', error);
  }
}

function asyncOperation() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // 模拟异步操作中的异常
      // throw new Error('Async operation failed');
      reject(new Error('Async operation failed'));
    }, 1000);
  });
}

example();

2. 使用 `Promise.catch()`：

如果异步操作返回的是 Promise 对象，可以使用 Promise.catch() 来处理异常。

asyncOperation()
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.error('Error:', error);
  });

3. 使用 `await` 包装 Promise：

通过使用 await 关键字来包装 Promise，可以让异常在整个异步链中传播。

async function example() {
  try {
    const result = await (async () => {
      // 模拟异步操作中的异常
      // throw new Error('Async operation failed');
      return await asyncOperation();
    })();
    console.log(result);
  } catch (error) {
    console.error('Error:', error);
  }
}

function asyncOperation() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error('Async operation failed'));
    }, 1000);
  });
}

example();

这些方法都可以在异步代码中比较优雅地处理异常。在选择使用哪种方式时，可以根据项目的具体情况和团队的偏好进行决定。

异步迭代与for…of

在 JavaScript 中，使用 async/await 进行异步迭代通常涉及到异步操作的集合，比如异步迭代器或返回 Promise 的集合。以下是使用 async/await 进行异步迭代的示例，以及如何结合 for...of 循环进行异步迭代：

异步迭代器：

异步迭代器是一个实现了 Symbol.asyncIterator 接口的对象，可以通过 for...of 循环进行异步迭代。以下是一个简单的示例：

// 异步迭代器
const asyncIterable = {
  [Symbol.asyncIterator]() {
    let count = 0;
    return {
      async next() {
        if (count < 3) {
          await new Promise(resolve => setTimeout(resolve, 1000));
          return { value: count++, done: false };
        } else {
          return { done: true };
        }
      }
    };
  }
};

// 使用async/await进行异步迭代
async function asyncIteration() {
  for await (const item of asyncIterable) {
    console.log(item);
  }
}

asyncIteration();

结合 `for...of` 循环：

可以使用 for...of 循环结合 await 关键字，以实现在异步迭代过程中等待每个 Promise 解析完成。以下是一个示例：

// 模拟返回 Promise 的集合
function getAsyncData(index) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(`Data ${index}`);
    }, 1000);
  });
}

// 使用for...of循环进行异步迭代
async function iterateAsyncData() {
  const indices = [1, 2, 3];

  for (const index of indices) {
    const data = await getAsyncData(index);
    console.log(data);
  }
}

iterateAsyncData();

在这个例子中，getAsyncData 返回一个 Promise，通过 for...of 循环和 await 关键字，确保每个异步操作在进行下一个迭代之前都会等待解析。这样，可以顺序地处理异步数据。

实际应用案例

实际项目中，有许多常见的异步操作场景，其中使用 async/await 可以帮助简化代码结构、提高可读性和维护性。以下是一些实际应用案例：

1. 异步数据获取：

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
    throw new Error('Failed to fetch data');
  }
}

// 使用
async function processData() {
  try {
    const data = await fetchData();
    // 处理数据
    console.log(data);
  } catch (error) {
    console.error('Error processing data:', error);
  }
}

2. 多个异步操作的串行执行：

async function performTasksSerially() {
  try {
    const result1 = await task1();
    console.log(result1);

    const result2 = await task2();
    console.log(result2);

    const result3 = await task3();
    console.log(result3);
  } catch (error) {
    console.error('Error:', error);
  }
}

// 使用
performTasksSerially();

3. 多个异步操作的并行执行：

async function performTasksInParallel() {
  try {
    const [result1, result2, result3] = await Promise.all([
      task1(),
      task2(),
      task3()
    ]);

    console.log(result1, result2, result3);
  } catch (error) {
    console.error('Error:', error);
  }
}

// 使用
performTasksInParallel();

4. 异步迭代处理数据集合：

async function processCollection() {
  const items = [1, 2, 3, 4, 5];

  for (const item of items) {
    try {
      const result = await processItem(item);
      console.log(result);
    } catch (error) {
      console.error(`Error processing item ${item}:`, error);
    }
  }
}

// 使用
processCollection();

5. 异步操作的顺序执行：

async function performTasksInOrder() {
  try {
    await task1();
    await task2();
    await task3();
  } catch (error) {
    console.error('Error:', error);
  }
}

// 使用
performTasksInOrder();

这些例子展示了 async/await 如何在实际项目中简化异步代码结构。这种方式使得异步代码更加可读，易于维护，并提高了开发效率。

性能考虑与最佳实践

在使用 async/await 时，考虑性能的同时，也需要遵循一些最佳实践以确保代码的可维护性和可读性。以下是一些性能注意事项和最佳实践：

1. 避免不必要的 `await`：

不是所有的函数调用都需要使用 await。如果函数返回一个同步的值，直接使用它而不是使用 await。

// 不推荐
const result = await syncFunction();

// 推荐
const result = syncFunction();

2. 并行执行异步操作时使用 `Promise.all`：

如果有多个独立的异步操作，考虑使用 Promise.all 来并行执行，而不是依次使用多个 await。

// 不推荐
const result1 = await asyncOperation1();
const result2 = await asyncOperation2();
const result3 = await asyncOperation3();

// 推荐
const [result1, result2, result3] = await Promise.all([
  asyncOperation1(),
  asyncOperation2(),
  asyncOperation3()
]);

3. 错误处理：

确保在异步函数中适当地处理错误。使用 try-catch 来捕获异步操作中的错误，并根据具体情况选择是抛出新的错误、返回默认值，还是采取其他适当的措施。

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
    throw new Error('Failed to fetch data');
  }
}

4. 控制并发：

在一些情况下，过度的并行异步操作可能会导致性能问题。在大规模的并行操作中，可能需要考虑控制并发量，以避免同时发起太多的异步请求。

5. 懒加载：

使用 async/await 时，可以考虑懒加载（lazy loading）的方式，即只在需要的时候再执行异步操作，而不是一开始就全部执行。

6. 性能监控：

对于性能关键的应用，考虑使用性能监控工具来分析异步操作的执行时间，以及查找可能的性能瓶颈。

7. Babel 转译配置：

如果项目中使用了 Babel 进行代码转译，确保 Babel 配置中启用了对 async/await 的支持，以确保在目标环境中正确运行。

这些注意事项和最佳实践可以帮助提高使用 async/await 时的性能和代码质量。在具体项目中，应该根据实际需求和项目特点进行权衡和选择。

TechWJ

关注

7
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
等一下！深入async/await的异步世界

在现代JavaScript中，异步编程已经成为处理网络请求、文件读写等任务的重要手段。async/await是一种用于更清晰、更易读地处理异步操作的语法糖，它的引入使得异步代码的编写变得更加优雅和直观。本博客将深入研究async/await的用法，帮助读者理解它的工作原理，并展示如何在实际项目中充分发挥其优势。
复制链接

扫一扫