Introducción a las promesas de JavaScript

El código asíncrono es útil para realizar tareas que requieren mucho tiempo, pero, por supuesto, no está exento de contras . El código asíncrono usa funciones de devolución de llamada para procesar sus resultados, sin embargo, las funciones de devolución de llamada no pueden devolver valores que las funciones típicas de JavaScript pueden.

Por lo tanto, no solo eliminan nuestra capacidad de controlar la ejecución de la función sino que también hacen que el manejo de errores sea un poco molesto. Aquí es donde entra en Promise objeto Promise, ya que pretende rellenar algunos de los baches en la codificación asincrónica .

Promise es técnicamente un objeto interno estándar en JavaScript, lo que significa que viene incorporado en JavaScript . Se usa para representar el resultado final de un bloque de código asincrónico (o el motivo por el que falló el código) y tiene métodos para controlar la ejecución del código asincrónico .

Sintaxis

Podemos crear una instancia del objeto Promise con la new palabra clave:

 nueva Promesa (función (resolver, rechazar) {}); 

La función pasada como parámetro para el constructor Promise() se conoce como el ejecutor . Tiene el código asíncrono y tiene dos parámetros del tipo de Function, conocidos como funciones de resolve y reject (más sobre esto en breve).

Objeto States of the Promise

El estado inicial de un objeto Promise se llama pendiente . En este estado, el resultado del cálculo asincrónico no existe .

El estado inicial pendiente cambia al estado cumplido cuando el cálculo es exitoso . El resultado del cálculo está disponible en este estado.

En caso de que falle el cálculo asincrónico, el objeto Promise pasa al estado rechazado desde su estado pendiente inicial. En este estado, el motivo de la falla de cálculo (es decir, mensaje de error) está disponible.

Para pasar del estado pendiente al cumplido, se llama a resolve() . Para pasar del estado pendiente al rechazado, se llama a reject() .

Cuando el estado cambia de pendiente a cumplido, se ejecuta el controlador de eventos del método Promise objeto. Y, cuando el estado cambia de pendiente a rechazado, se ejecuta el controlador de eventos del método de catch del objeto Promise .

Ejemplo 1

Código "No Promisificado"

Supongamos que hay un archivo hello.txt que contiene la palabra "Hola". Así es como podemos escribir una solicitud AJAX para recuperar ese archivo y mostrar su contenido, sin usar el objeto Promise :

 función getTxt () {let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () {try {switch (this.status) {case 200: document.write (this.response); descanso; caso 404: lanzar 'Archivo no encontrado'; predeterminado: throw 'Error al buscar el archivo'; }} catch (err) {console.log (err)}}; } getTxt (); 

Si el contenido del archivo se ha obtenido con éxito, es decir, el código de estado de respuesta es 200, el texto de respuesta se escribe en el documento . Si no se encuentra el archivo (estado 404), se genera un mensaje de error "Archivo no encontrado". De lo contrario, se genera un mensaje de error general que indica que no se pudo recuperar el archivo.

Código "promisificado"

Ahora, promisifiquemos el código anterior :

 function getTxt () {return new Promise (función (resolver, rechazar) {let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () {switch (this.status) {case 200: resolve (this.response); case 404: reject ('Archivo no encontrado'); default: reject ('Falló buscar el archivo ');}};}); } getTxt (). then (función (txt) {document.write (txt);}). catch (función (err) {console.log (err);}); 

La función getTxt() ahora está codificada para devolver una nueva instancia del objeto Promise, y su función ejecutor retiene el código asincrónico de antes.

Cuando el código de estado de respuesta es 200, la Promise se cumple llamando a resolve() (la respuesta se pasa como el parámetro de resolve() ). Cuando el código de estado es 404 o algún otro, la Promise se rechaza usando reject() (con el mensaje de error apropiado como el parámetro de reject() ).

Los controladores de eventos para los métodos then() y catch() del objeto Promise se agregan al final .

Cuando se cumple la Promise, se ejecuta el controlador del método then() . Su argumento es el parámetro pasado de resolve() . Dentro del controlador de eventos, el texto de respuesta (recibido como argumento) se escribe en el documento .

Cuando se rechaza Promise, se ejecuta el controlador de eventos del método catch(), registrando el error .

La principal ventaja de la versión promisificada anterior del código es el manejo de errores . En lugar de arrojar Excepciones no detectadas, como en la versión no promulgada, se devuelven y registran los mensajes de falla apropiados .

Pero no es solo la devolución de los mensajes de falla sino también el resultado del cálculo asincrónico lo que puede ser realmente ventajoso para nosotros. Para ver eso, necesitaremos expandir nuestro ejemplo.

Ejemplo 2

Código "No Promisificado"

En lugar de simplemente mostrar el texto de hello.txt, quiero combinarlo con la palabra "Mundo" y mostrarlo en la pantalla después de un tiempo de espera de 2 segundos . Aquí está el código que uso:

 función getTxt () {let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () {try {switch (this.status) {case 200: document.write (concatTxt (this.response)); descanso; caso 404: lanzar 'Archivo no encontrado'; predeterminado: throw 'Error al buscar el archivo'; }} catch (err) {console.log (err)}}; } function concatTxt (res) {setTimeout (function () {return (res + 'World')}, 2000); } getTxt (); 

En el código de estado 200, se llama a la función concatTxt() para concatenar el texto de respuesta con la palabra "Mundo" antes de escribirlo en el documento.

Pero este código no funcionará como se desee . La función de devolución de llamada setTimeout() no puede devolver la cadena concatenada . Lo que se imprimirá en el documento undefined está undefined porque eso es lo que concatTxt() .

Código "promisificado"

Entonces, para hacer que el código funcione, promisifiquemos el código anterior, incluido concatTxt() :

 function getTxt () {return new Promise (función (resolver, rechazar) {let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () {switch (this.status) {case 200: resolve (this.response); case 404: reject ('Archivo no encontrado'); default: reject ('Falló buscar el archivo ');}};}); } function concatTxt (txt) {return new Promise (función (resolver, rechazar) {setTimeout (function () {resolve (txt + 'World');}, 2000);}); } getTxt (). then ((txt) => {return concatTxt (txt);}). then ((txt) => {document.write (txt);}). catch ((err) => {consola. log (err);}); 

Al igual que getTxt(), la función concatTxt() también devuelve un nuevo objeto Promise lugar del texto concatenado. La Promise devuelta por concatTxt() se resuelve dentro de la función de devolución de llamada de setTimeout() .

Cerca del final del código anterior, el controlador de eventos del primer método then() se ejecuta cuando se cumple la Promise de getTxt(), es decir, cuando el archivo se obtiene con éxito . Dentro de ese controlador, se llama a concatTxt() y se devuelve la Promise devuelta por concatTxt() .

El controlador de eventos del segundo método then() se ejecuta cuando se cumple la Promise devuelta por concatTxt(), es decir, se agota el tiempo de espera de dos segundos y se concatTxt() resolve() con la cadena concatenada como su parámetro.

Finalmente, catch() captura todos los mensajes de excepciones y fallas de ambas promesas.

En esta versión Promisified, la cadena "Hello World" se imprimirá con éxito en el documento.

React.js: 14 herramientas y recursos para desarrolladores web

La popularidad de React.js ha estado creciendo rápidamente desde que Facebook lanzó por primera vez la biblioteca en 2013. Es el quinto proyecto de código abierto con más estrellas en Github, y los anuncios de trabajo para los desarrolladores de React también están en gran aumento. React es un marco de JavaScript liviano para construir interfaces de usuario ; los ejemplos más destacados son Facebook e Instagram.React

(Consejos de tecnología y diseño)

Cómo publicar en varios idiomas en una página de Facebook

Una página de Facebook es una forma rápida pero eficaz de llegar rápidamente a audiencias globales. Es por eso que las marcas, los productos, las empresas y los servicios tienen sus propias páginas de Facebook configuradas, generalmente en su lengua materna o en la lingua franca de la región en la que se encuentran. Sin

(Consejos de tecnología y diseño)