javascript - 如何使用生成器对返回的 API 调用顺序进行排序？

Question

我正在练习一些更高级的 Javascript 技术，并且遇到了生成器和迭代器，这是我想研究的东西。我知道我做错了，但我真的不确定该怎么做。

我的小程序的想法是:我想为四个(或更多，但我正在测试四个)城市对 OpenWeather API 进行 API 调用。城市存储在一个数组中，一个一个地存储，城市被附加到 URL 并发送一个获取请求。每个响应都附加到一个数组，并将该数组发送到客户端。这是我的原始代码:

// node/express setup here

const cities = ["London%2Cuk", "New York%2Cus", "Johannesburg%2Cza", 'Kingston%2Cjm']

const url = process.env.URL_BASE;

const headers = {
    "X-RapidAPI-Host": process.env.HOST,
    "X-RapidAPI-Key": process.env.API_KEY
}

const requestInit = { method: 'GET',
           headers: headers
        };

const fetchWeather = (ep) => {
    const appendedURL = url + ep;
    return fetch(appendedURL, requestInit)
        .then(r => r.json());
}

app.get('/', (req, res, err) => {
     const data = []
     Promise.all(
        cities.map( async (city) => {
            await fetchWeather(city)
            .then(returns => {
                data.push(returns)
            })

         })
     )
     .then(() => {
        res.send(data)
        return data;
    })
    .catch(err => console.log(err))   
})

对吧？固体，工作正常。但现在我对如何订购感到困惑。我想这样做的方法是将 await fetchWeather(city) 切换为 yield fetchWeather(city) 并让生成器管理器继续调用 next( city) 直到数组完成，但我在弄清楚模式时遇到了问题。我重构了对生成器的 api 调用，并正在测试生成器管理功能。

根据我的理解，我的范例是这样的:

• 首先 .next() 开始迭代
• 第二个.next(args)将指定城市传给第一个yield
• 第三个 .next() 发送产生的获取请求，并且应该(理想情况下)返回可以被 .then() 处理的响应对象。

这是我的测试生成器代码:

function *fetchWeather() {
    for (let i = 0; i < cities.length; i++){
        const appendedURL = url + (yield);
         yield fetch(appendedURL, requestInit)
        .then(r => {
            return r.json()
        });
    }
}

const generatorManager = (generator) =>{

    if (!generator) {
        generator = fetchWeather();
    }

    generator.next()
    generator.next(cities[i])
    generator.next().value.then( e => 
        console.log(e));
}

我收到一个错误:TypeError: Cannot read property 'then' of undefined 而且我不确定我的逻辑哪里出了问题。如果我不能单独传递已知值，我该如何重构它以允许我等待特定的 promise ？我知道必须有办法，但我错过了一些东西。

提前致谢。

Answer 1

我不明白你希望在这里使用生成器有什么好处，但你得到这个错误的原因是你正在做一对多的 .next()

第一个 generator.next() 运行 fetchWeather 直到第一个 yield，即 const appendedURL = url + (yield); 结束时的 yield。在这种情况下调用 generator.next() 的返回值为 { value: undefined, done: false }

之后，generator.next(cities[i]) 恢复 fetchWeather，cities[i] 是之前 yield 的结果。生成器继续运行，调用 fetch，然后对该 promise 调用 .then，然后生成结果 promise。所以 generatorManager 从 generator.next(cities[i]) 中看到的返回值是 { value:/* a promise object */, done: false }.

因此，要修复该错误，您需要减少对 generator.next 的调用次数

generator.next()
generator.next(cities[i]).value.then(e => 
  console.log(e));

如评论中所述，我执行此操作的通常方法是将城市映射到 promises，然后执行 promise.all。例如:

Promise.all(
  cities.map((city) => fetchWeather(city)) // note, this is the original fetch weather, not the generator
).then((data) => {
  res.send(data);
  return data;
})
.catch(err => console.log(err))