6

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.

2 respuestas 2

4

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

2
  • +1 No conocía esa API. Y el código se simplifica bastante. Aunque la doc dice que todavía no es compatible con varios navegadores.
    – A. Cedano
    Commented el 14 jul. 2017 a las 14:29
  • @A.Cedano, si bien es cierto que la nueva API fetch no es compatible con varios navegadores, hay que tener en cuenta que Promise tampoco. Por suerte para todos, se pueden encontrar polyfills
    – Marcos
    Commented el 14 jul. 2017 a las 14:54
3

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..." />


Enlaces

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.