JavaScript教程：深入理解异步迭代器与生成器-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00913/article/details/148552225

JavaScript教程：深入理解异步迭代器与生成器

ru.javascript.info Современный учебник JavaScript 项目地址: https://gitcode.com/gh_mirrors/ru/ru.javascript.info

前言

在现代JavaScript开发中，处理异步数据流变得越来越常见。本文将带你深入理解JavaScript中的异步迭代器和生成器，这是处理异步数据流的强大工具。

同步迭代器回顾

在探讨异步迭代器之前，让我们先回顾一下常规的同步迭代器。一个可迭代对象需要实现Symbol.iterator方法，该方法返回一个迭代器对象，迭代器对象包含next()方法。

let range = {
  from: 1,
  to: 5,

  [Symbol.iterator]() {
    return {
      current: this.from,
      last: this.to,

      next() {
        if (this.current <= this.last) {
          return { done: false, value: this.current++ };
        } else {
          return { done: true };
        }
      }
    };
  }
};

这种同步迭代器适用于数据立即可用的情况，但当我们需要处理异步获取的数据时，就需要异步迭代器了。

异步迭代器基础

异步迭代器与常规迭代器类似，但有三个关键区别：

使用Symbol.asyncIterator而非Symbol.iterator
next()方法返回一个Promise
使用for await...of循环进行迭代

下面是一个异步迭代器的示例，它每秒产生一个值：

let range = {
  from: 1,
  to: 5,

  [Symbol.asyncIterator]() {
    return {
      current: this.from,
      last: this.to,

      async next() {
        await new Promise(resolve => setTimeout(resolve, 1000));
        
        if (this.current <= this.last) {
          return { done: false, value: this.current++ };
        } else {
          return { done: true };
        }
      }
    };
  }
};

(async () => {
  for await (let value of range) {
    console.log(value); // 1, 2, 3, 4, 5 (每秒一个)
  }
})();

异步生成器

异步生成器是创建异步迭代器的更简洁方式。通过在函数声明前添加async关键字，我们可以在生成器中使用await：

async function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 1000));
    yield i;
  }
}

(async () => {
  let generator = generateSequence(1, 5);
  for await (let value of generator) {
    console.log(value); // 1, 2, 3, 4, 5 (每秒一个)
  }
})();

异步生成器会自动处理Promise，使代码更加简洁易读。

实际应用：分页API调用

让我们看一个实际应用场景：处理分页API。假设我们需要从GitHub获取某个仓库的所有提交记录，但API每次只返回一页数据（例如30条记录）。

async function* fetchCommits(repo) {
  let url = `https://api.github.com/repos/${repo}/commits`;
  
  while (url) {
    const response = await fetch(url, {
      headers: {'User-Agent': 'Our script'}
    });
    
    const body = await response.json();
    
    // 从Link头获取下一页URL
    let nextPage = response.headers.get('Link').match(/<(.*?)>; rel="next"/);
    url = nextPage && nextPage[1];
    
    for (let commit of body) {
      yield commit;
    }
  }
}

使用这个异步生成器，我们可以轻松遍历所有提交记录：

(async () => {
  let count = 0;
  
  for await (const commit of fetchCommits('user/repo')) {
    console.log(commit.author.login);
    
    if (++count === 100) break; // 只获取前100条
  }
})();

关键区别总结

| 特性 | 同步 | 异步 | |------|------|------| | 迭代器方法 | Symbol.iterator | Symbol.asyncIterator | | next()返回值 | {value, done} | Promise解析为{value, done} | | 循环语法 | for...of | for await...of | | 生成器声明 | function* | async function* |