掌握JavaScript中的迭代器和生成器，顺便了解一下async、await的原理

前端

2024-01-15 15:19:36

迭代器、生成器、Async 和 Await：JavaScript 中异步编程的秘密武器

迭代器和生成器：探索元素的艺术

在 JavaScript 的世界中，迭代器和生成器携手并进，赋予我们遍历集合的能力。想象一下一个懒惰的厨师，他每叫一个菜品就准备一份，这就是生成器。而迭代器则是他忠实的助手，把一道道菜送到饥肠辘辘的食客手中。

async 和 await：拥抱异步编程的优雅

随着 Web 变得越来越动态，异步编程成为了一门必备技能。async 和 await 就像烹饪中的压力锅，让异步操作变得轻松快捷。async 标记函数为异步，而 await 则让它耐心等待异步操作的完成。

揭开 async/await 的面纱

深入了解 async/await 的原理，就好比揭开美味佳肴背后的烹饪技巧。

Promise 的美味佳肴： 在 async/await 出现之前，Promise 扮演着异步操作的主厨角色。它处理异步操作，在操作完成后提供结果。
生成器的神奇： 生成器充当魔法棒，将一系列值转换成一个迭代器。yield 就像暂停按钮，暂停生成器函数，直到需要下一个值时再恢复执行。
async/await 的烹饪魔法： async/await 利用生成器和 Promise 的力量，将异步操作变为一道美味佳肴。async 标记函数为生成器，await 让函数暂停并等待 Promise 解决。

示例代码：让你的代码活起来

理论是美味的，但实践才是盛宴。以下代码示例将激发你的灵感：

// 迭代器和生成器

const iterable = [1, 2, 3, 4, 5];

for (const element of iterable) {
  console.log(element);
}

function* generator() {
  yield 1;
  yield 2;
  yield 3;
  yield 4;
  yield 5;
}

const iterable = generator();

for (const element of iterable) {
  console.log(element);
}

// async/await

async function fetchUserData() {
  const response = await fetch('https://example.com/user-data');
  const data = await response.json();

  return data;
}