Skip to main content
se añadieron 123 caracteres en el cuerpo
Origen Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

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.

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.

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.
se añadieron 250 caracteres en el cuerpo
Origen Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

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.

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íncronas:

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.

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.
se añadieron 215 caracteres en el cuerpo
Origen Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

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, usando ademásmetiendo la petición PromiseXMLHttpRequest, es dentro de una Promesa. Es la forma recomendada para manejar peticiones asíncronas:

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.

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, usando además Promise, es la forma recomendada:

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
    });
}

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.

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íncronas:

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.

Origen Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257
Loading