JavaScript profundo: API REST de WordPress y promesas de JavaScript

Cuando Matt Mullenweg les dijo a todos queAprende JavaScript en profundidadLa comunidad se volvió loca tratando de descifrar qué significa esto para WordPress. ¿Qué debería aprender? ¿Debería ser un framework, una biblioteca o simplemente JavaScript puro?

Si a esta altura ya te has animado a aprender algo, ya estás listo para profundizar. Incluso si recién estás empezando a aprender una biblioteca sencilla como jQuery, una vez que hayas superado las animaciones y los fundidos básicos, querrás aprender más.

Hace unos años, las promesas se agregaron de forma nativa a JavaScript. Antes de analizarlas, permítanme explicar la necesidad o el problema que abordan.

Ajax y código asincrónico

Si vas a aprender algo sobre JavaScript, en concreto sobre la API REST, es cómo obtener los datos de tu sitio mediante JavaScript y mostrarlos sin tener que recargar la página. AJAX se presentó por primera vez a la mayoría de las personas con Facebook: te permite ver la actualización de tu muro sin tener que pulsar el botón de actualizar. Para obtener más información sobre AJAX, consulta algunos de los otros artículos en torquemag.io.

Aquí viene el problema.

var publicaciones = {};$.ajax({    URL: ajaxURL + '/publicaciones',    método: 'GET',    éxito: función(res){        publicaciones = res;    }});$.each( publicaciones, función( clave, valor ){    $( '#your-wrapper' ).append( 'h2' + value.title.rendered + '/h2' );});

En el código mencionado anteriormente, utilicé jQuery y la API REST para obtener mis últimas publicaciones usando el/publicacionespunto final y guardar la respuesta del servidor comopublicaciones var.Quiero usar la respuesta inmediatamente para mostrar mis publicaciones en la página. Sin embargo, si ejecutara este código, obtendría un error que indica que la publicación no está definida o, mejor dicho, que está vacía. Lo que es más irritante es que a veces este código funcionará bien y otras veces no. Esta es la definición de uncondición de carrerao donde a veces se carga la página y las publicaciones están definidas, y todo funciona, y a veces no porque el AJAX aún no se ha completado.

Utilice la devolución de llamada de éxito

Si solo quiero capturar las últimas publicaciones y mostrarlas, haría algo como esto:

$.ajax({    URL: ajaxURL + '/publicaciones',    método: 'GET',    éxito: función(res){        $.each( res, función( clave, valor ){            $( '#your-wrapper' ).append( 'h2' + value.title.rendered + '/h2' );        });    }});

¿Ves la diferencia? Cuando el servidor responde con los datos, jQuery sabe que la llamada a la API fue exitosa y luego ejecuta otra función que pasa los datos de respuesta.

En su forma más simple, este es un ejemplo de promesa. Técnicamente, es un código asincrónico o en ejecución basado en datos y eventos. La función de éxito no se ejecutará hasta que el servidor indique que hay una conexión exitosa.

JavaScript es de un solo subproceso

JavaScript es de un solo subproceso, lo que significa que solo puede hacer una cosa a la vez. Algunos lenguajes son multiproceso, lo que significa que pueden realizar varias tareas a la vez o hacer varias cosas a la vez. JavaScript no puede. En el pasado, esto se combatía con JavaScript controlado por eventos. Se lanza un evento y hay un detector de eventos que espera a que se active ese evento para ejecutar más código. Al igual que la función de éxito anterior, los detectores de eventos no se ejecutan hasta que el evento que se está activando se lo indica.

jQuery ‘Activado’

Por cierto, si tienes dudas sobre los eventos, busca la función “on” de jQuery. Es posible que ya la hayas usado, como esta:

$('.some-element').on('click', función(){    // hacer algo});

Este es un comando de clic simple, onclick, hace algo. El evento es “click” y la función de devolución de llamada se ejecuta solo cuando se activa ese evento.

Las promesas resuelven todos los problemas

El JavaScript controlado por eventos puede ser tedioso y, si bien la función de éxito funciona para AJAX, debe considerar escenarios en los que está encadenando comandos AJAX. Por ejemplo, supongamos que está utilizando la API REST de WordPress para obtener los datos de un usuario y luego desea encadenarlos con una donación utilizando la funciónDARAPI del complemento. Si no se utiliza nada más que la función de devolución de llamada de éxito, el código puede volverse largo y difícil de mantener.

Resolver, Rechazar

Para explicar esto un poco más fácil, voy a utilizar una biblioteca jQuery llamadaRSVP.js—Hay algunos otros por ahí, pero considero que esta sintaxis de código es una de las más fáciles de entender.

Primero, aclaremos la terminología. Una promesa puede tener los siguientes estados:

Resuelto– Éxito

Rechazado– Fallo/Error

Pendiente– Sigue funcionando

Establecido– Terminado y resuelto o rechazado

Al crear una promesa de uso, utilizamos elresolveryrechazarfunciones para definir el estado.

Resolver

La resolución es lo mismo que la función de éxito de AJAX. Si realiza la misma llamada AJAX pero la convierte en una promesa, en caso de éxito, la resolveremos con los datos. Si la llamada AJAX falla o recibe un error, puede pasar los datos a través de la función de rechazo.

Rechazar

Rechazar es el evento de error, por lo que si surgiera un error en lugar de un éxito, esto retornaría en su lugar.

Y luego

Una vez que haya definido una promesa, deberá utilizar ‘then’, una función de cadena, para continuar ejecutando su código.

https://gist.github.com/royboy789/f039bcff55559161b97b

La función then maneja escenarios resueltos y rechazados y le permite continuar con sus funciones una vez que se hayan recuperado los datos.

Uniendo ‘Thens’ para crear más magia asombrosa

Aquí es donde las promesas mejoran. Si desea manipular los datos o realizar otra llamada AJAX, puede hacerlo devolviendo los datos a la función “then”. Puede encadenar las funciones y solo se ejecutarán de forma continua si tienen éxito. Tal vez su flujo se parezca a esto:

1. Obtenga las últimas publicaciones
2. Recorra cada uno para obtener la identificación
3. Realice otra llamada AJAX a otra API para obtener más datos (es decir, un pago)
4. Realizar otra llamada AJAX (es decir, actualizar la publicación con los detalles del pago)
5. Crear nuevos objetos para cada publicación con datos fusionados
6. Mostrar objeto(s) de publicación

Esto puede resultar complicado si utilizas solo jQuery AJAX, pero con promesas, puedes seguir retornando. Y lo mejor es que no seguirá ejecutándose cuando haya una falla. Esto te permite detectar fallas rápidamente y diagnosticar por qué están fallando. En el ejemplo mencionado anteriormente, si un pago no se realiza, es posible que quieras detener la operación y notificarles.

AngularJS $q

EsNo hay ningún secreto esoMe encanta AngularJS y lo que puede hacer. Una de mis cosas favoritas es que tiene promesas incorporadas con$qPuedes crear unobjeto diferidoque utiliza promesas para agregar complejidad a su aplicación.

Además, muchas de las demás funciones integradas en AngularJS se basan en promesas. Esto incluye$httpque es el contenedor AJAX predeterminado para Angularjs, que le permite trabajar con promesas listas para usar sin necesidad de mucho código adicional.

Más lectura

Solo he echado un vistazo superficial a las promesas en JavaScript. No dudes en dejar comentarios con otras cosas que te gusten de las promesas o sobre cómo las usas en WordPress.

Nota: El artículoPromesas de JavaScript en html5ocks.comEl libro de Jake Archibald ofrece una excelente introducción al tema. Está escrito en un lenguaje fácil de entender. En él, se brindan más detalles sobre las promesas y se habla de por qué son útiles y de otras cosas que se pueden hacer con ellas.