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

Question

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

我正在将本地存储数据解析为对象（每个对象都会发出一个单独的 API 请求），如果有超过 1 个对象 - 我想将所有后续的 API 排队延迟 1 秒调用。这是我的代码：

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() 不等待前面的 callback。您可以将 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。

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

How to queue API calls with 1 second delay in JS using setInterval() inside map() function

javascript

settimeout