JavaScript, junto con HTML y CSS, son lenguajes de programación clave. Casi todos los sitios web 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 sus capacidades. A continuación, veremos en qué se diferencia de la API REST de WordPress y explicaremos cuándo usarla en su desarrollo de WordPress.
¡Entremos de inmediato!
Introducción a la API de recuperación
Como todas las API, Fetch API se usa para enviar y recibir datos entre aplicaciones. Como sugiere el nombre, se usa principalmente para «recuperar» recursos a través de solicitudes HTTP y luego modificarlos. De esta manera funciona como Solicitud XMLHttp.
Sin embargo, Fetch API ofrece una mejora con respecto a este método mediante el uso de un código más limpio para lograr el mismo resultado final. Lo hace devolviendo los datos. en forma de «promesas»que son una solución simplificada y más legible que devoluciones de llamadas reemplazadas 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 cuando suceda. Una promesa siempre se «resuelve» (lo que resulta en una respuesta) o «se rechaza» (lo que resulta en un error).
Si la promesa se cumple, un .Siguiente el controlador realiza la acción especificada. Si se rechaza la promesa, es posible que reciba un mensaje de error con .captura función. 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 lo ponemos todo junto, obtenemos una API que toma los recursos como promesas. Luego devuelve objetos de respuesta si se resuelven estas promesas o errores si se rechazan. También puedes agregar .Siguiente o .captura para seguir inmediatamente con una respuesta o error con una acción diferente.
Aquí hay un ejemplo simple: suponga 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 el objeto de respuesta. Luego usa un .Siguiente controlador para devolver esa respuesta en formato JSON que puede ver en su sitio. Como puede ver, esta API ofrece mucho potencial, especialmente para aplicaciones específicas.
¿Cuál es la diferencia entre Fetch API y WordPress REST API?
En resumen, además de ser API, Fetch API y WordPress REST API son diferentes en todos los sentidos. Algunos de los aspectos más destacados incluyen:
- Fetch API devuelve datos como promesas y WordPress API devuelve datos en formato JSON.
- De igual manera debes usar .Siguiente controlador para convertir los datos devueltos por Fetch API al formato JSON.
- Puede devolver datos en formularios que no sean JSON a través de la API Fetch.
- Para utilizar las promesas de la API REST de WordPress, debe escribirlas usted mismo después de llamar a la API.
Si desea utilizar la API Fetch de WordPress, solo necesita llamar a la función de obtención en su código JavaScript. Seguimiento de esta característica con .Siguiente manejar el acceso al contenido. Luego puede mostrarlo en su sitio web o en su aplicación web.
2 veces es posible que desee utilizar Fetch API en lugar de REST API
Probablemente pueda lograr casi cualquier cosa que desee hacer con la API Fetch utilizando la API REST de WordPress. Sin embargo, Fetch API proporciona algunas funciones útiles que no están tan disponibles a través de la API nativa de WordPress. Veamos dos ejemplos.
1. Devolver una respuesta que no es JSON
Como mencionamos, cuando usa la API REST de WordPress, devuelve datos JSON de forma predeterminada. Sin embargo, puede haber ocasiones en las que necesite una respuesta en una forma diferente. Para que esto funcione con la API de WordPress, debe convertir JSON al formato deseado en algún lugar a lo largo de la línea.
Por otro lado, Fetch API puede devolver datos en varios formatos diferentes. Si bien JSON es posiblemente el formulario de respuesta de Fetch API más popular, también puede usarlo para devolver una respuesta en amplia gama de otros formatosincluido XML, HTMLtexto plano y blobs.
Para hacer esto, es suficiente cambiar el método de respuesta especificado en .Siguiente un controlador con el que accede al contenido descargado. por ejemplo aqui esta una llamada a la API Fetch muy simplificadaseguido de un .Siguiente un controlador que devuelve una respuesta en formato JSON:
fetch('https://jsonplaceholder.typicode.com/todos')
.then(response => response.json())
.then(data => console.log(JSON.stringify(data)))Entonces, si desea devolver los datos en XML, puede usar respuesta.texto en cambio respuesta.json. Esto es mucho más fácil que convertir después recuperación de datos utilizando la API REST de WordPress.
2. Usar promesas para realizar funciones en un orden específico
además si quieres usar promesas con respuestas para las llamadas a la API REST de WordPress, puede ser más eficiente simplemente usar la API Fetch. Para la API de WordPress, debe escribir su propia promesa después de la solicitud y la respuesta, mientras que la API Fetch le devolverá esa promesa.
Si está utilizando la API para solicitar datos y luego desea utilizar las funciones de JavaScript para hacer otra cosa con esos datos, la API Fetch podría ser una buena opción. 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 iniciar la función de evento agregando .Siguiente handler a la promesa devuelta por la API Fetch para ver eventos de SeatGeek. Las promesas pueden hacer que el uso de JavaScript sea mucho más fácil, algunod para que su código sea más limpio y legible. Esto, a su vez, puede hacer que su desarrollo sea más eficiente y efectivo.
Solicitud
Cuando se trata de crear sitios web, no llegará muy lejos sin JavaScript. Tener un identificador en una 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, hemos cubierto dos ejemplos de cuándo es posible que desee utilizar la API de recuperación de JavaScript en lugar de la API REST de WordPress:
- Devolver una respuesta que no está en formato JSON. Con Fetch API, puede devolver datos en una variedad de formatos, mientras que WordPress REST API solo devuelve JSON.
- Uso de promesas para realizar funciones en un orden específico. Dado que Fetch API devuelve datos como promesas, no necesita escribir los suyos propios.
¿Tiene otras preguntas sobre la API Fetch? ¡Déjalos en la sección de comentarios a continuación!
El artículo Miniatura Obraz Sudowoodo / shutterstock.com
