how to wait for 2 AJAX requests to finish before processing with the answer of 2? Without JQuery

Question

how to wait for 2 AJAX requests to finish before processing with the answer of 2? Without JQuery

Navigation

#1 by (1 votes)

3

I am doing several tests to get together the information of two different AJAX (Without JQuery) requests (therefore with their different times etc ...) but I can not "get" the information of the function that processes the AJAX response.

I give an example:

Normal AJAX request to a TXT (without jquery)

function cargar_txt(){
  //Inicializa_xhr Obtener la instancia del objeto XMLHttpRequest creando una variable
if(window.XMLHttpRequest) {
 peticion_http = new XMLHttpRequest();
}
else if(window.ActiveXObject) {
 peticion_http = new ActiveXObject("Microsoft.XMLHTTP");
}
if(peticion_http) 
{
    peticion_http.onreadystatechange = procesar_txt;
    peticion_http.open("POST", "ruta_de_mi_archivo", true);
    peticion_http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    peticion_http.send("");
}

Function that reads what was received:

function procesar_txt() {

if(peticion_http.readyState == 4) 
{
    if(peticion_http.status == 200) 
    {
        var cadena = peticion_http.responseText;
        var secundario = cadena.split(";");

        return secundario ; 
    }
 }
}

The two requests are quite similar, the problem is when trying to "extract" the information from the local environment of the function, there is no way, neither with CallBacks nor with promises can I use the information outside the function, the value always it's "undefined".

Any solution? Thank you very much.

PS: At the request of Trauma in this case (starting from the previous code without return, equal to the global variable) I try to do with promises and oranges from China.

var gloabl = [];
var global1 = [];

cargar_txt();
var procesar_txt = function() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('Informacion primer AJAX:'+global[0]);
    }, 5000);
  })
}
cargar_txt_segundo();
var procesar_txt_segundo = function() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('Informacion segundo AJAX:'+global1[0]);
    }, 2000);
  })
}

Promise.all([procesar_txt(global), procesar_txt_segundo(global1)])
  .then((result) => {
    alert(result.join(','));
    console.log();
  })
  .catch(e => alert('Error capturado:  ${e}'));

javascript ajax

asked by Roarca 01.04.2018 в 12:03

source

1 answer

I can not get the actual path of the SD on my android device in Xamarin.forms Transparent color change effect of a Toolbar

score 1 · Answer 1

You can first create a generic function that convert an AJAX call into a promise:

function requestPromesa (method, url, body) {
  return new Promise(function (resolve, reject) {
    const xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = function () {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.response);
      } else {
        reject({
          status: xhr.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function () {
      reject({
        status: xhr.status,
        statusText: xhr.statusText
      });
    };
    xhr.send(body);
  });
}

And use it for your two calls, joining them with Promise.all :

const p1 = requestPromesa('POST','url_cualquiera');
const p2 = requestPromesa('GET','otra_url_cualquiera');
Promise.all([p1,p2]).then(function (respuestas) {
  const respuesta1 = respuestas[0];
  const respuesta2 = respuestas[1];
  ...
}).catch(function (statusError) { ... });