javascript - 如何在 JS 中使用 map() 函数内的 setInterval() 以 1 秒延迟对 API 调用进行排队

Question

我有一个函数getData，可以从外部 API 获取数据。如果我每秒发出超过 1 个请求，则会收到 503 错误。因此，我正在考虑对 API 请求进行排队，但这些调用仍然会被批量处理，并且我收到相同的 503 错误。

我将本地存储数据解析为对象(每个对象将发出单独的 API 请求)，如果有超过 1 个对象 - 我希望以 1 秒的延迟对所有后续 API 调用进行排队。这是我的代码:

const lsData = JSON.parse(localStorage.getItem('weatherappData'));
if (lsData) {
    lsData.map((location, index) => {
        const city = location.city;
        const country = location.country;
        if (index === 0) {
            getData(city, country, table);
        } else {
            setTimeout(() => getData(city, country, table), 1000);
        }
    });
}

我做错了什么？谢谢!

Answer 1

.map() 不会等待上一个回调。您可以将 1000 乘以 index

setTimeout(() => getData(city, country, table), index * 1000);

或使用async/await。

(async() => {
  for (const [index, {city, country}] of lsData.entries()) {
    try {
      if (index === 0) {
        await getData(city, country, table);
      } else {
        await new Promise(resolve => setTimeout(() => resolve(getData(city, country, table)), 1000))
      }
    } catch(e) {
        console.error(e)
    }
  }
})()

请注意，table 未在问题代码中定义。