How to throttle a for in Javascript loop that has an async await api call inside?

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
}

Let's say there are 5 `product` items in `products`. Just for this 5 requests one already introduces a delay of 4 seconds until the last request is/was sent. Does anyone take user experience (annoyed customers) into account? How about fixing the API that is does not accept just 1 request per second but maybe 20/1sec? Or how about designing the API in a way that it accepts multi product queries per request? — Peter Seliger, May 28 '22 at 23:00
@PeterSeliger yes user experience is very important. This is in a cron task that puts together data to be presented to the client in a much more performant way. Unfortunately the API is a 3rd party API so there is no control there. — zewicz, May 28 '22 at 23:06
You should handle the 'Too Many Requests' error. So instead of a for loop, use a do while and only shift the index into products after you get a successful response (or some other error that is not 'Too Many Requests' error). After each response of either success or error, pause for one second. That way if you have another client using the same api key for instance, your request will retry if it fails due to frequency — Dave Pile, May 29 '22 at 02:50

Reed Hambrook · Accepted Answer · 2022-05-28T22:54:42.633

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.

score 0 · Answer 2 · answered May 28 '22 at 22:50

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.

How to throttle a for in Javascript loop that has an async await api call inside?

2 Answers2