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:
- Usar los datos dentro de la petición
- Pasar los datos desde dentro de la petición a otra función
- 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
- 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.