Xmlhttprequest Good example applied

Question

Hello, all right? I’ll explain my question

I have a multi-name array to automate a customer list and need to send one by one on a get request

Example site.com.br/api/registration/user/ >name

I need to go through the entire array, remove a name from it and get into the api, wait for the answer and move on to the next one, and at the same time show a kind of percentage of how much is left to finish the array.

Thanks for the help :)

Answer 1

You need to break it down into steps to get control of progress.

An example would be like this, using Promises:

function ajax(nome) {
  return new Promise(function(resolve, reject) {
    var url = 'https://httpbin.org/get?text=' + nome;
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var json = JSON.parse(xmlhttp.responseText);
        resolve(json);
      }
    }
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
  });
}

function processarPedidos(nomes, fn, cb) {
  var progress = document.querySelector('progress');
  progress.value = 0;

  (function processador(arr) {
    var proximo = arr.shift();
    if (!proximo) cb();
    else ajax(proximo).then(fn).then(function() {
    
      // atualizar a progress bar
      progress.value = 100 - (arr.length * 100 / nomes.length);
      // chamar o próximo
      processador(arr, fn, cb);
    }).catch(function(err) {
      console.log(err);
    });
  })(nomes.slice());
}

var nomes = ['João', 'Ana', 'Maria', 'Rita', 'António', 'Paula'];

processarPedidos(nomes, function(json) {
  console.log(json.args);
}, function() {
  console.log('100%!!');
})

<progress value="0" max="100"></progress>