如何在内部有异步等待 api 调用的 Javascript 循环中限制 for？

Question

Is there a way to throttle a for in Javascript loop that has an async await api call inside of the loop? The problem here is that the API endpoint has a speed throttle of 1 second per request and some return with the error statusText: 'Too Many Requests' , so the goal is to throttle the loop to hit the API every second ( the order that the API returns the data is not of concern in this use case ). Is there a way to do this with the current implementation or does throttling not work with this implementation?

const getProductSales = async () => {
  const products = [...] // array of product slugs
  const productSales = []

  for (const product in products) {
    try {
      const response = await axios.get(
        `https://www.someapi.com/api/v1/sales/${product}`
      )
      productSales.push(
        {
          product: product,
          sales: response
        }
      )
    } catch (err) {
      console.error(err)
    }
  }

  return productSales
}

Answer 1

Using set timeout this can be accomplished. Set timeout is a callback function so to await we can use this sleep function from https://stackoverflow.com/a/72408587/10772577 .

const sleep = (time) => {
   return new Promise((resolve) => setTimeout(resolve, Math.ceil(time * 1000)));
};

 const getProductSales = async () => {
 const products = [...] // array of product slugs
 const productSales = []

 for (const product in products) {
    try {
      const [ response ] = await Promise.all([
          axios.get(
            `https://www.someapi.com/api/v1/sales/${product}`
          ), 
          sleep(1)
      ]);

      productSales.push(
        {
          product: product,
          sales: response
        }
      )
    } catch (err) {
      console.error(err)
    }
  }

  return productSales
}

Here I have added sleep to a Promise.all() so the request should not happen more than once per second.

Answer 2

You could try throttling it like that:

...
const apiPromise = axios.get(`https://www.someapi.com/api/v1/sales/${product}`)
const throttlePromise = new Promise((res) => setTimeout(res, 1000)) //resolves after one second
const responses = await Promise.all([apiPromise, throttlePromise ])
const response = responses[0]
...

Promise.all() will take an array of promises and resolve an array of results when all of them are resolved. So if the api request takes shorter than one second, it will wait for that throttlePromise before continuing the loop.