Axios requests in a loop after previous completes

Question

The application I am building involves sending video frames to the server for processing. I am using Axios to send a POST request to the server. I intend to send about 3-5 frames(POST request) per second. I need to send one after the previous request completes because the next request has data in the request body which depends on the response of the previous request.

I tried running it in a loop but that won't do because the next one starts before the previous one completed. In the current code, I have something like this -

const fun = () => {
    axios.post(url,data)
         .then((res) => {
              // process the response and modify data accordingly
              // for the next request
          })
         .finally(() => fun());
};

This way I am able to achieve the requests to be one after another continuously. But I am unable to control the number of requests that are being sent per second. Is there any way I can limit the number of requests per second to be say at max 5?

Additional Info : I am using this for a web app where I need to send webcam video frames(as data URI) to the server for image processing and the result back to the client after it. I am looking to limit the number of requests to reduce the internet data consumed by my application and hence would like to send at the max 5 requests per second(preferably evenly distributed). If there's a better way that Axios POST requests for this purpose, please do suggest:)

Answer 1

An amazing library called Bottleneck can come to your aid here. You can limit the number of request per second to any number you want using the following code:

const Bottleneck = require("bottleneck");
const axios = require('axios');
const limiter = new Bottleneck({
    maxConcurrent: 1,
    minTime: 200
});

for(let index = 0; index < 20; index++){
    limiter.schedule(() => postFrame({some: 'data'}))
        .then(result => {
            console.log('Request response:', result)
        })
        .catch(err => {
            console.log(err)
        })
}


const postFrame = data => {
    return new Promise((resolve, reject) => {
        axios.post('https://httpstat.us/200', data)
            .then(r => resolve(r.data))
            .catch(e => reject(e))
    });
}

By manipulating the limiter

const limiter = new Bottleneck({
    maxConcurrent: 1,
    minTime: 200
});

You can get your axios request to fire at any rate with any concurrency. For instance to limit the number of request per second to 3, you would set minTime to 333 . Stands to reason, if you want to limit it to 5 per second, it would have to be set to 200 .

Please refer the the Bottleneck documentation here: https://www.npmjs.com/package/bottleneck