Dado que las Promesas de Javascript prometen mucho. Una de las cosas que me gustaría saber es cómo hacer una petición Ajax mediante promesas, en puro Javascript, sin tener que pasar por librerías de terceros.
Se trataría de una petición que maneje adecuadamente el éxito o el fracaso de la petición hecha, indicando el resultado obtenido o bien un mensaje de error.
La nueva API Fetch permite realizar llamadas "AJAX" (Request) e implementa Promises por defecto.
Ejemplo de uso:
function get(method) {
var url = document.getElementById("datos").value;
fetch(url, {
method: method
}).then(function(response) {
response.json().then(function(object) {
console.log("¡Correcto!", object);
});
}).catch(function(error) {
console.error("!Hubo un error!", error);
});
}Introduzca URL de un servicio REST y pulse Enviar:<br />
<input id="datos" type="text" value="https://api.github.com" size="33" />
<input type="button" onclick="get('GET')" value="Enviar..." />Mas info:
* David Walsh - fech API
* Google Developers - Introduction to fetch()
* Github - fetch polyfill
Este sería un ejemplo de función de llamada a Ajax, usando Promesas.
Con nuestra función myAjax() podemos hacer peticiones vía ajax y obtener la respuesta, o el código de error, de forma transparente, sin necesidad de librerías como jQuery.
Según se indica en el enlace de más abajo:
Las API anteriores se actualizarán para usar promesas y si es posible, se hará de forma que sean compatibles con versiones anteriores. XMLHttpRequest es una gran candidata.
Lo cual quiere decir que las llamadas a Ajax mediante Promises será mucho más fácil en un futuro. Mientras eso llega, podemos usar una función como esta, pasándole a la función en parámetro el método (GET, POST) y la url del servicio REST, API, o un archivo php, json u otro de nuestras aplicaciones.
function myAjax(method, url) {
// Devolver una nueva Promise.
return new Promise(function(resolve, reject) {
// Hacer lo usual de XHR
var req = new XMLHttpRequest();
req.open(method, url);
req.onload = function() {
// Esto es llamado incluso cuando ocurre error 404 etc
// Verificar el status
if (req.status == 200) {
// Resolver la Promise con el texto de respuesta
resolve(req.response);
console.log(req.response);
} else {
// De lo contrario, rechazar con el texto del estatus
reject(Error(req.statusText));
}
};
// Manejar errores de red
req.onerror = function() {
reject(Error("Network Error"));
};
// Hacer la petición
req.send();
});
}
function get(method) {
var url = document.getElementById("datos").value;
myAjax(method, url).then(function(response) {
console.log("¡Correcto!", response);
}, function(error) {
console.error("!Hubo un error!", error);
})
}Introduzca URL de un servicio REST y pulse Enviar:<br />
<input id="datos" type="text" value="https://api.github.com" size="33" />
<input type="button" onclick="get('GET')" value="Enviar..." />