AJAX with callbacks and promises

async.js

const XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest; // importing xmlhttprequest package because node doesn't support it out of the box
const superHeroes = ['Batman', 'Superman', 'WonderWoman', 'Flash', 'Cyborg', 'Aquaman', 'Green Lantern', 'Martian Manhunter']; // an array of request params
const completedFetchingData = () => { // function to be called when all ajax requests complete.
  console.log('Just completed fetching the data');
}
const failedFetchingData = () => { // function to be called when data fetching fails
  console.log('Failed to fetch the data');
}

const ajaxRequestWithPromise = (param) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.addEventListener('load', () => { // a listener which executes when the xhr request succeeds
      resolve(JSON.parse(xhr.responseText));
    });
    xhr.addEventListener('error', () => { // a listener which executes when the xhr request fails
      reject(new Error(xhr.statusText));
    })
    xhr.open('GET', `https://httpbin.org/get?param=${param}`);
    xhr.send();
  });
}

const request = async () => { // async function always returns a promise
  for(let i = 0; i < superHeroes.length; i++) {
    const response = await ajaxRequestWithPromise(superHeroes[i]); // await can be only used inside async functions
    console.log(response.args);
  }
  completedFetchingData();
}

request().catch((error) => { failedFetchingData(); }); // catch rejected promise

callback.js

const XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest; // importing xmlhttprequest package because node doesn't support it out of the box
const superHeroes = ['Batman', 'Superman', 'WonderWoman', 'Flash', 'Cyborg', 'Aquaman', 'Green Lantern', 'Martian Manhunter']; // an array of request params
const completedFetchingData = () => { // function to be called when all ajax requests complete.
  console.log('Just completed fetching the data');
}

const ajaxRequest = (param, callback) => { // a simple vanilla ajax request with callback
  let xhr = new XMLHttpRequest();
  xhr.addEventListener('load', () => { // a listener which executes when the xhr request succeeds
    callback(JSON.parse(xhr.responseText));
  });
  xhr.open('GET', `https://httpbin.org/get?param=${param}`);
  xhr.send();
}

superHeroes.forEach((superHero, index) => {
  ajaxRequest(superHero, (response) => {
    console.log('Response', response.args);
    if (index === superHeroes.length - 1) { // executes only when the callback is of the last superhero
      completedFetchingData();
    }
  });
});

promise.js

const XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest; // importing xmlhttprequest package because node doesn't support it out of the box
const superHeroes = ['Batman', 'Superman', 'WonderWoman', 'Flash', 'Cyborg', 'Aquaman', 'Green Lantern', 'Martian Manhunter']; // an array of request params
const completedFetchingData = () => { // function to be called when all ajax requests complete.
  console.log('Just completed fetching the data');
}
const failedFetchingData = () => { // function to be called when data fetching fails
  console.log('Failed to fetch the data');
}

const ajaxRequest = (param, callback) => {
  let xhr = new XMLHttpRequest();
  xhr.addEventListener('load', () => { // a listener which executes when the xhr request succeeds
    callback(JSON.parse(xhr.responseText));
  });
  xhr.addEventListener('error', () => { // a listener which executes when the xhr request fails
    callback({ error: xhr.statusText });
  })
  xhr.open('GET', `https://httpbin.org/get?param=${param}`);
  xhr.send();
}

let superPromises = []; // an array to hold promises of ajax request for all superHeroes.
superHeroes.forEach((superHero) => {
  superPromises.push(new Promise((resolve, reject) => {
    ajaxRequest(superHero, (response) => {
      if (!response.error) { // if response is not error
        console.log(response.args);
        resolve();
      } else {
        reject();
      }
    });
  }));
});

Promise.all(superPromises).then(() => { // execute when all promises are fulfilled
  completedFetchingData();
}, () => {
  failedFetchingData();
});