JS| How to use Promise.all to handle thousands of request

My YouTube Channel: FrontEnd Interview Preparation: https://www.youtube.com/channel/UC-elmWUfbcbmvuhlS12nCtg
Please subscribe my channel, so that I can be enough motivated to create videos

Method 1, we can make use of es6-promise-pool to manage concurrent requests.

• uses generator function
• uses event listener addEventListener of PromisePool instance

import PromisePool from 'es6-promise-pool';


// macs - Array of mac addresses
useEffect(() => {
   const fetchData = () => {
    const results = [];
    const generatePromises = function*() {
      for (let count = 0; count < macs.length; count++) {
        yield axios.get(`/ipdn/${macs[count]}`, ...);
      }
    }
    const promiseIterator = generatePromises();
    
   // Create a pool with 10 concurrent requests max
    const pool = new PromisePool(
      promiseIterator,
      10 // Configurable
    );
    
    // To listen to result
    pool.addEventListener('fulfilled', function (event) {
      console.log('Fulfilled: ' + event.data.result);
      results.push(event.data.result);
    });
    // Start the pool
    pool.start().then(function () {
      setData(results);
      console.log('Complete');
    });
  };
  fetchData();
}, []);

Method 2

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    // helper function, split array to chunked array
    const splitToChunks = (items, chunkSize = 50) => {
      const result = [];
      for (let i = 0; i < items.length; i += chunkSize) {
        result.push(items.slice(i, i + chunkSize));
      }
      return result;
    }
    
    const fetchData = async () => {
      const result = []; // init value
      const macAddresses = []; // array of mac addresses - your mac addresses
     // return array of array [[...50 mac adds], [], []]
     const chunkedArray = splitToChunks(macAddresses); 
      
    
     for (const macs of chunkedArray) { 
        // now macs is [...50 mac adds]
        const promises = macs.map((mac) => {
          return axios.get(`/ipdn/${mac}`, { timeout: 10000 });
        });
        // now promises is array contains 50 Promises
        // wait until finish 50 requests
        const response = await Promise.all(promises); 
        
        // copy response to result, and continue for next block
        result.push(...response); 
     }
    
    setData(result);
  };
  fetchData();
  }, []);
}

Keep learning, keep growing!

Don’t forget to follow me for more such articles.

Let’s connect on LinkedIn!. Please read more for more data structure javascript questions.

Ref — https://stackoverflow.com/questions/63618914/how-to-use-promise-all-to-handle-thousands-of-request