0

El problema es sencillo... Tengo una funcion principal llamada "Busqueda" por ejemplo, la cual dentro hace una peticion XMLHttpRequest... Esta peticion me devuelve un objeto JSON, el problema es que yo necesito hacer los calculos dentro de mi funcion Busqueda, pero no dentro de la peticion XMLHTTPRequest... el problema es que al parecer mi variable no existe fuera de la peticion aunque la declare fuera de ella. No se como hacer para obtener esos datos

 let municipio = document.getElementById('municipio');
 var municipioData; 
 if(municipio.value != ""){
       const http = new XMLHttpRequest();
       const url = "/getMunicipioUnico/" + municipio.value ;
       http.onreadystatechange = function () {
           if (this.readyState == 4 && this.status == 200) {

           //Aqui recibo los valores en un JSON
             municipioData = JSON.parse(this.responseText);
         }
   };
    http.open("GET", url);
     http.send();
    }else{
     console.log("is null");
  }


  //AQUI (FUERA DE LA PETICION ES DONDE NECESITO LOS DATOS DE ESE JSON, PERO NO LOS MUESTRA ME DICE QUE ESTA UNDEFINED
    console.log(municipioData);

1 respuesta 1

1

El problema es que las llamadas a XMLHttpRequest son asíncronas. Entonces no puedes disponer sin más de los datos que recibes en onreadystatechange, porque puede intentes usar esos datos cuando la petición aún no haya terminado.

Para evitar eso puedes:

  1. Usar los datos dentro de la petición
  2. Pasar los datos desde dentro de la petición a otra función
  3. Usar un callback

Vamos a implementar un callback, metiendo la petición XMLHttpRequest dentro de una Promesa. Es la forma recomendada para manejar peticiones asíncronas1:

const getData = (url) => {
  return new Promise((resolve, reject) => {
    let req = new XMLHttpRequest();
    req.addEventListener("readystatechange", () => {
      if (req.readyState === 4 && req.status === 200) {
        let data = JSON.parse(req.responseText);
        resolve(data);
      } else if (req.readyState === 4) {
        reject("error en la petición");
      }
    });
    req.open("GET", url);
    req.send();
  });
};


let municipio = document.getElementById('municipio');
var municipioData; 
if(municipio.value != ""){
    const url = `/getMunicipioUnico/${municipio.value}`;
    getData(url)
        .then((data) => {
            console.log("promise resolved", data);
            //Debes consumir data aquí
        })
        .catch((err) => {
            console.log("promise rejected", err);
            //Debes implementar aquí tu política de manejo de errores
    });
}else{
    console.log("is null");
}

Si quieres algo menos refinado, puedes, como dije, implementar las soluciones 1 ó 2, pero conviene que uses promesas.

Para más detalles consulta la pregunta: ¿Qué es una promesa en Javascript? y sus respuestas.

Notas

  1. O bien usar la nueva API Fetch, que está basada en Promise, puede reemplazar sin ningún problema a XMLHttpRequest y es más simple y más moderna. Aquí tienes una Guía de uso con ejemplos.
3
  • ¿Eres Dios? :) Gracias... habia olvidado el hecho de que son asincronicas. Y si, lo mejor sera usar un promise Commented el 12 oct. 2022 a las 17:14
  • 1
    @AldahirRuizValdez soy un simple hijo suyo... Aclarado eso, si puedes échale un ojo a la API Fetch, es sorprendentemente simple con relación a XMLHttpRequest y está basada en Promise. Saludos.
    – A. Cedano
    Commented el 12 oct. 2022 a las 17:16
  • Lo haré, aunque por ahora estoy obligado, por tiempo, a usar XMlHTTPRequest. Eso si, me dare el tiempo de revisar la API fetch y reemplazar las peticiones del proyecto. Se ve mucho mas sencillo... Muchas gracias Commented el 12 oct. 2022 a las 17:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.