<div class="btn-container">
<a id="btn" class="waves-effect waves-light btn">Get all URLS</a>
</div>
<hr>

<div id="container"></div>

<pre id="result"></pre>
body {
  margin: 0;
  min-height: 100vh;
  background: #004d4d;
}
#container > div {
  width: 150px;
  margin: 10px;
  padding: 10px;
  line-height: 12px;
  background: #ededed;
  display: inline-block;
  border: 2px solid #fff;
  
  animation-name: fade-in;
	animation-fill-mode: both;
	animation-duration: .3s;
}
.teal {
  background: #008080;
}

.btn-container {
  margin: 10px;
}

.card-title {
 font-size: 14px !important; 
}

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

// var axios = require('axios');

let AllDatas = [],
    AllDatasInError = [],
    urls = [],
    waitTime = 500, // the amount of time we wait between each batch of request
    start = 0,
    step = 2, // number of url we request
    position = 0,
    nbRequest = 12; // number of request 

AllDatas['total'] = 0; // total of data

let btn = document.getElementById('btn');

btn.addEventListener('click', function() {
  batchProcessing(urls);
});

function createUrl() {
    for (let i = 1; i <= nbRequest; i++) {         
      urls.push(`https://jsonplaceholder.typicode.com/photos/${i}`);
    }
}
createUrl();


// timer
const waitFor = (ms) => new Promise(r => setTimeout(r, ms));

// parallel REQUEST with AXIOS
async function getData(links) {
    try {
        const res = await axios.all(links.map(link => axios.get(link)));
        console.log('GetData Start time', new Date());
        return res;
    } catch (error) {
        console.log('------------------------------------------');
        console.log(error);
    }
}

//
async function batchProcessing(urls) {
    const len = urls.length / step;
    // let result = [];
    console.time('batchProcessing');
    console.log('batchProcessing Start time', new Date());

    // use of an interceptor to edit every response
    axios.interceptors.response.use(function (response) {
        // Do something with response data        
        let responseData = response.data;

        // const newVal = {};
        if (responseData.id) {
          responseData['position'] = `${position}/${len}`;
            // create html element
            addElement(responseData);
          
            AllDatas['total'] += 1;
            AllDatas.push(responseData);
        }
        
        console.log('responseData', responseData);
        return responseData;
    }, function (error) {
        // Do something with response error
        return Promise.reject(error);
    });
  
  
  // batch processing

    for(let index = 0; index < len; index ++) {
      var processingUrl  = urls.slice(start, start + step);
      start += step;
      position += 1;
    
      console.log('position', position + ' / ' + len);
      console.log('processingUrl',  processingUrl);
      
      // make the requests
      const res = await getData(processingUrl);
      
      AllDatas = AllDatas.concat(res);
      // break time
      await waitFor(waitTime);
    }
    
    // we are now done
    console.log('End timer', new Date());
    console.timeEnd('getData');
    // console.log('Final AllDatas', AllDatas);
  
  // document.querySelector('pre').innerHTML = AllDatas;
}

/******
RENDERING THE HTML
*****/

function addElement (data) { 
  console.log('element added', data);
  let mainDiv = document.getElementById("container"); 
  let newDiv = document.createElement("div");
  
  let newContent = `
          <div class="card">
            <div class="card-image">
              <img src="${data.thumbnailUrl}">
              <span class="card-title">
                Element ${data.id} 
              </span>
            </div>
            <div class="card-content">
              <p>${data.title}. (batch ${data.position})</p>
            </div>
            <div class="card-action">
              <a href="${data.url}">See the source</a>
            </div>
      </div>`; 

  
  // console.log('newContent', newContent);
  newDiv.innerHTML = newContent;  
  mainDiv.appendChild(newDiv); 
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser-polyfill.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.min.js