掌握JavaScript异步迭代器：解锁异步魔法-DEV365 开发者社区

在JavaScript的不断发展的景观中，保持最新功能的最新功能对于编写有效和现代的代码至关重要。引起了极大关注的这样的功能是异步迭代器。虽然迭代器长期以来一直是用于顺序数据处理的JavaScript不可或缺的一部分，但引入异步编程模式引起了异步迭代的需求。

想象一下，毫不费力地通过数据流进行遍历，这些数据流可能涉及从API中获取数据，从文件读取或任何其他异步数据源。这正是异步迭代器发光的地方，提供了一种无缝而优雅的解决方案来处理此类情况。在这篇博客文章中，我们将深入研究JavaScript异步迭代器的世界，探索他们的基本原理，了解其收益，并发现他们如何在编写强大的异步代码时成为游戏改变者。无论您是一个经验丰富的开发人员，希望扩大自己的技能，还是对高级JavaScript技术感到好奇的新来者，此博客文章适合您。我们将揭示异步迭代器的力量，并将您的异步编程技能提高到新的高度。

我们跳入代码之前，让我们了解什么是异步迭代器。在JavaScript中，迭代器是使我们能够循环收集的对象。异步迭代器通过允许我们处理异步操作（例如从API中获取数据或从流中读取数据）来进一步迈出一步。

创建异步峰值很简单。我们使用Symbol.asyncIterator来定义对象内部的异步迭代方法。此方法将使用next方法返回一个对象，该方法可以解决一个在异步序列中包含next值的承诺。

让我们看一个例子。

const getUsers = (ids: number[]): AsyncIterable<User> => {
  return {
    [Symbol.asyncIterator]() {
      let i = 0;
      return {
        async next() {
          console.log("getUsers next");
          if (i === ids.length) {
            return { done: true, value: null };
          }
          const data = await fetch(
            `https://reqres.in/api/users/${ids[i++]}`
          ).then(res => res.json());
          return { done: false, value: data };
        },
      };
    },
  };
};

想象您有一个ID列表，只需要在需要时读取用户数据。使用Asynciterators，您可以创建一个处理API的函数，并在每个迭代中返回每个请求的结果，从而使代码更加透明。

要消耗异步值的值，我们使用for-await-of循环。该循环就像常规的for-of循环一样工作，但专门为异步迭代而设计。

for await (const user of getUsers([1, 2, 3, 4, 5])) {
  console.log(user);
}

错误处理在处理异步操作时至关重要。异步迭代器允许我们使用for-await-of循环周围的try-catch块处理错误。

try {
    for await (const user of getUsers([1, 2, 3, 4, 5])) {
      console.log(user);
    }
  } catch (err) {
    console.error(err);
  }

Asynciterator仅在需要时运行代码，因此直到您不调用下一个方法，就什么都不会发生，例如迭代器。

return方法也存在于异步物。如果代码无法完成所有迭代，则使用此方法。想象一下循环打电话给休息或回报；在这种情况下，引擎盖下的JavaScript为我们称为return方法。在这种方法中，我们可以处理所需的一切。我们可能需要重置某些内容或检查迭代器的当前值。

const getUsers = (ids: number[]): AsyncIterable<User> => {
  return {
    [Symbol.asyncIterator]() {
      let i = 0;
      return {
        ...
        async return() {
          console.log("getUsers return");
          return { done: true, value: null };
        },
      };
    },
  };
};

异步迭代器像迭代器一样强大，我们可以创建接受异步器并操纵其返回另一个异步迭代器的功能。例如，我们可以创建一个地图功能，该函数接受异步迭代器，并使用用户指定的回调返回另一个。

function map<T, U>(iter: AsyncIterable<T>, fn: (v: T) => U): AsyncIterable<U> {
  return {
    [Symbol.asyncIterator]() {
      const iterator = iter[Symbol.asyncIterator]();
      return {
        async next() {
          console.log("map next");
          const { done, value } = await iterator.next();
          if (done) return { done, value: null };
          return { done, value: fn(value) };
        },
        async return() {
          console.log("map return");
          if (iterator?.return) await iterator?.return();
          return { done: true, value: null };
        },
      };
    },
  };
}

这些功能具有以前所说的所有好处。 JavaScript无能为力，直到代码库不要求下一个功能。对于return方法也是如此，现在您可以将getUsers与map组成，以构建一个新的异步迭代器。

const iterator = map(getUsers([1, 2, 3, 4, 5]), user => user.data.id)
for await (const num of iterator) {
  if (num === 3) break;
  console.log(num);
}

，您可以深入了解JavaScript中异步迭代器的世界。它们为使用异步数据流的工作提供了一种优雅的解决方案，从而使您的代码更有条理和高效。尝试项目中的异步迭代器，您会惊讶于它们如何简化复杂的异步工作流程。

我还在我的Youtube channel上创建了一个视频，您可以在下面找到。

如果您发现此内容有帮助，请喜欢并分享。如果您有任何疑问，反馈或疑问，请在评论ð

中告诉我

n.b。您可以找到此帖子的代码here。