Fetch API: qué es y en qué se diferencia de la API REST de WordPress

Una introducción a la API Fetch

Como todas las API, Fetch API se utiliza para enviar y recibir datos entre aplicaciones. Como sugiere su nombre, se usa principalmente para «obtener» recursos mediante solicitudes HTTP y luego modificarlos. De esa manera, funciona de manera muy similar a XMLHttpRequest .

Sin embargo, Fetch API ofrece una mejora con respecto a ese método, ya que utiliza 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 reemplazó las devoluciones de llamada para permitir a los desarrolladores ejecutar funciones de JavaScript en un orden específico.

Esencialmente, una promesa establece que una determinada acción eventualmente ocurrirá y brinda información sobre lo que debería suceder a continuación cuando suceda. Una promesa siempre se ‘resuelve’ (lo que resulta en una respuesta) o ‘rechaza’ (lo que resulta en un error).

Si se resuelve la promesa, un controlador .then ejecuta la acción especificada. En caso de que se rechace la promesa, es posible que se muestre un mensaje de error utilizando una función .catch . Dado que JavaScript es asíncrono, todo esto sucede en segundo plano sin impedir que se procese el resto de la página.

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

Aquí hay un ejemplo simple: supongamos que usa la API Fetch para recuperar una lista de publicaciones. Los datos de la publicación se devuelven como una promesa, que se resuelve y da como resultado un objeto de respuesta. A continuación, utiliza un controlador .then 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.

En qué se diferencia la API Fetch de la API REST de WordPress

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

• La API Fetch devuelve datos como promesas, mientras que la API de WordPress devuelve datos como JSON.
• Del mismo modo, debe usar un controlador .then para convertir los datos devueltos por Fetch API en JSON.
• Puede devolver datos en formularios que no sean JSON a través de Fetch API.
• Para usar 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 de obtención en su código JavaScript. Siga esa función con un controlador .then para acceder al contenido. Luego puede mostrarlo en su sitio web o en su aplicación web.

2 ocasiones en las que puede querer usar 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 en su lugar. Sin embargo, Fetch API proporciona un par de funciones útiles a las que no se puede acceder a través de la API nativa de WordPress. Veamos dos ejemplos.

1. Devolver una respuesta que no es JSON

Como ya mencionamos, cuando utiliza la API REST de WordPress, devuelve datos JSON de forma predeterminada. Sin embargo, puede haber momentos en los que necesite su respuesta en una forma diferente. Para hacer que funcione con la API de WordPress, tendría que convertir el JSON al formato deseado en algún momento 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 usarla para devolver respuestas en una amplia variedad de otros formatos , incluidos XML , HTML , texto sin formato y blobs.

Para hacerlo, simplemente cambie el método de respuesta especificado dentro del controlador .then que usa para acceder al contenido que ha recuperado. Por ejemplo, aquí hay una llamada a la API Fetch muy simplificada , seguida de un controlador .then que devuelve la respuesta como JSON:

buscar ('https://jsonplaceholder.typicode.com/todos')
  .then(respuesta => respuesta.json())
  .entonces(datos => consola.log(JSON.stringify(datos)))

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

2. Usar promesas para ejecutar funciones en un orden particular

Además, si desea usar promesas con las respuestas a 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, deberá 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 otra cosa 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";

buscar (URL de eventos)
  .then((respuesta) => respuesta.json())
  .entonces(función (evento) {
  volver evnt.events.map(función(evento){
    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;
    agregar (lista de eventos, evento único);
    agregar (evento único, fecha del evento);
  })

})
.catch(función (error) {
  console.log('Error durante la recuperación: ' + error.message);
});

Aquí, podemos ejecutar una función de evento agregando un controlador .then a la promesa devuelta por la API Fetch, para mostrar eventos del sitio SeatGeek. Las promesas pueden hacer que el uso de JavaScript sea mucho más fácil y mantener 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á muy lejos sin JavaScript. Tener un identificador en 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 podría querer usar la API de recuperación de JavaScript en lugar de la API REST de WordPress:

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

¿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