首页 > 解决方案 > 如何使用单击事件侦听器处理异步生成器

问题描述

我有一个异步生成器,它在调用 next() 时产生更新的值。我想在每次点击时调用 next() 但似乎没有调用生成器并且它总是返回第一个值我该如何处理?

const baseApi = `https://hacker-news.firebaseio.com/v0`;
const topStories = [
  19571054,
  19570735,
  19570986,
  19571139,
  19571399,
  19569865,
  19561411,
  19571027,
  19560994
];
const fetchAsyncA = async url => await (await fetch(url)).json();
const sliceBy = (list, start, end) => list.slice(start, end);
async function* hackerNewsStreamer(ids, slice) {
  let start = 0;
  while (start <= ids.length) {
    let urls = sliceBy(ids, start, start + slice).map(
      id => `${baseApi}/item/${id}.json?print=pretty`
    );
    yield await Promise.all(urls.map(fetchAsyncA));
    start += slice;
  }
}

document.querySelector("button").addEventListener("click", async () => {
  const articlesStream = hackerNewsStreamer(topStories, 5);
  const { value: articles } = await articlesStream.next();
  console.log(articles);
  //console.log(await articlesStream.next());
  //console.log(await articlesStream.next());
  //console.log(await articlesStream.next());
});

https://codepen.io/daniele-bolla/pen/MRKMBX

标签: javascriptasync-awaitgenerator

解决方案


推荐阅读