Fetch API: qué es y cómo difiere de la API REST de WordPress


JavaScript junto con HTML y CSS, son lenguajes de programación clave. Casi todos los sitios en la web usan JavaScript, por lo que es importante comprender su interfaz de programación de aplicaciones (API) nativa si desea convertirse en un desarrollador completo.

En esta publicación, le presentaremos la API Fetch y lo que puede hacer. Luego discutiremos en qué se diferencia de la API REST de WordPress y explicaremos cuándo es posible que desee usarlo en su desarrollo de WordPress.

¡Vamos a entrar!

Una introducción a la API Fetch

Como todas las API, la API Fetch se usa para enviar y recibir datos entre aplicaciones. Como su nombre lo indica, se utiliza principalmente para "obtener" recursos mediante solicitudes HTTP y luego modificarlas. De esa manera, funciona de manera muy similar a un XMLHttpRequest.

Sin embargo, la API Fetch ofrece una mejora sobre ese método, mediante el uso de un código más limpio para lograr el mismo resultado final. Lo hace devolviendo datos en forma de "promesas", que son una solución simplificada y más legible que es devoluciones de llamada reemplazadas para permitir a los desarrolladores ejecutar funciones de JavaScript en un orden específico.

Esencialmente, una promesa establece que eventualmente ocurrirá una determinada acción y proporciona información sobre lo que debería suceder después cuando ocurra. Una promesa siempre "resuelta" (que da como resultado una respuesta) o "rechazada" (que da como resultado un error).

Si se resuelve la promesa, un .luego El controlador ejecuta la acción especificada. En caso de que se rechace la promesa, se puede mostrar un mensaje de error en su lugar utilizando un .captura función. Como JavaScript es asíncrono, todo esto sucede en segundo plano sin evitar que el resto de la página se procese.

Entonces, cuando juntamos todo esto, obtenemos una API que recupera los recursos como promesas. Luego devuelve objetos de respuesta si se resuelven esas promesas o errores si se rechazan. También puedes agregar .luego o .captura controladores para seguir inmediatamente la respuesta o error con otra acción.

Aquí hay un ejemplo simple: supongamos que usa la API Fetch para recuperar una lista de publicaciones. Los datos publicados se devuelven como una promesa, que se resuelve y da como resultado un objeto de respuesta. Luego usas un .luego controlador para devolver esa respuesta como JSON, que puede mostrar en su sitio web. Como puede ver, esta API ofrece mucho potencial, especialmente para aplicaciones específicas.

Cómo la API Fetch difiere de la API REST de WordPress

En resumen, aparte del hecho de que son ambas API, la API Fetch y la API de REST de WordPress son diferentes en casi todos los sentidos. Algunas distinciones clave incluyen:

  • La API Fetch devuelve datos como se prometió, mientras que la API de WordPress devuelve datos como JSON.
  • Del mismo modo, debe usar un .luego controlador para convertir los datos devueltos por la API Fetch en JSON.
  • Puede devolver datos en formularios distintos de JSON a través de la API Fetch.
  • Para utilizar las promesas con la API REST de WordPress, deberá escribirlas usted mismo después de llamar a la API.

Si desea utilizar la API Fetch con WordPress, simplemente debe llamar a la función fetch en su código JavaScript. Sigue esa función con un .luego controlador para acceder al contenido. Luego puede mostrarlo en su sitio web o en su aplicación web.

2 veces que desee utilizar la API Fetch sobre la API REST

Probablemente pueda lograr casi cualquier cosa que desee hacer con la API Fetch utilizando la API REST de WordPress. Sin embargo, la API Fetch proporciona un par de características útiles que no son tan accesibles a través de la API nativa de WordPress. Veamos dos ejemplos.

1. Devolver una respuesta que no sea JSON

Como ya mencionamos, cuando usa la API REST de WordPress, devuelve datos JSON de forma predeterminada. Sin embargo, puede haber ocasiones en las que necesite su respuesta en una forma diferente. Para que eso funcione con la API de WordPress, debería tener convertir el JSON en su formato deseado en algún lugar a lo largo de la línea.

La API Fetch, por otro lado, es capaz de devolver datos en varios formatos diferentes. Si bien JSON es probablemente la forma más popular para las respuestas de Fetch API, también puede usarlo para devolver respuestas en una amplia variedad de otros formatos, incluyendo XML, HTML, texto sin formato y blobs.

Para hacerlo, simplemente cambie el método de respuesta especificado dentro del .luego controlador que utiliza para acceder al contenido que ha recuperado. Por ejemplo, aquí está una llamada API de Fetch muy simplificada, seguido de un .luego controlador que devuelve la respuesta como JSON:

fetch('https://jsonplaceholder.typicode.com/todos')
  .then(response => response.json())
  .then(data => console.log(JSON.stringify(data)))

Por lo tanto, si desea devolver los datos como XML, puede usar respuesta.text en vez de respuesta.json. Esto es mucho más fácil que realizar una conversión después recuperar datos con la API REST de WordPress.

2. Uso de promesas para ejecutar funciones en un orden particular

Además, si quieres usar promesas con las respuestas para sus llamadas a la API REST de WordPress, puede ser más eficiente simplemente usar la API Fetch en su lugar. Con la API de WordPress, necesitaría escribir su propia promesa después de la solicitud y la respuesta, mientras que la API Fetch le devolverá la promesa.

Si está utilizando una API para solicitar datos y luego desea utilizar las funciones de JavaScript para hacer algo más con esos datos, la API Fetch puede ser el camino a seguir. Por ejemplo, considere este ejemplo:

var eventsURL = "https://api.seatgeek.com/2/events?q=amway-center&client_id=MTI3NjI2NjF8MTUzNDYxMjQ1MS4zNA";

fetch(eventsURL)
  .then((response) => response.json())
  .then(function (evnt) {
  return evnt.events.map(function(event){
    var singleEvent = document.createElement('li');
    var eventDate = document.createElement('span');
    var newDate = moment(event.datetime_local).format('LLL');
    singleEvent.innerHTML = event.title;
    eventDate.innerHTML = newDate;
    append(eventlist, singleEvent);
    append(singleEvent, eventDate);
  })

})
.catch(function (error) {
  console.log('Error during fetch: ' + error.message);
});

Aquí, podemos ejecutar una función de evento agregando un .luego controlador de la promesa devuelta por la API Fetch, para mostrar eventos desde el sitio SeatGeek. Las promesas pueden hacer que usar JavaScript sea mucho más fácil, und mantenga su código más limpio y más legible. A su vez, esto podría hacer que su desarrollo sea más eficiente y efectivo.

Conclusión

Cuando se trata de desarrollo web, no llegarás muy lejos sin JavaScript. Tener un control de su API nativa lo ayudará a recuperar fácilmente los recursos que puede modificar para usar en su sitio web o aplicación web.

En esta publicación, discutimos dos ejemplos de cuándo es posible que desee utilizar la API JavaScript Fetch en lugar de la API REST de WordPress:

  1. Devolver una respuesta que no es JSON. Con la API Fetch, puede devolver datos en una variedad de formatos, mientras que la API REST de WordPress solo devuelve JSON.
  2. Usar promesas para ejecutar funciones en un orden particular. Dado que la API Fetch devuelve los datos como promesas, no tendrá que escribir los suyos.

¿Tiene alguna otra pregunta sobre la API Fetch? ¡Déjalos en la sección de comentarios a continuación!

Imagen en miniatura del artículo Sudowoodo / shutterstock.com