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.

Kits de GUI de Sketch gratuitos para diseño web y móvil: lo mejor de

Muchos diseñadores están saltando rápidamente de Adobe Photoshop al maravilloso reino de Sketch. Este programa de diseño digital para OS X proporciona mejores herramientas para el diseño de la interfaz de usuario, el diseño de iconos y ofrece soporte vectorial de píxeles en un solo programa. Esto ha llevado a un aumento en la popularidad de los obsequios lanzados por los diseñadores de Sketch .Cualqui

(Consejos de tecnología y diseño)

Accesos directos seleccionables están llegando a Google

Buscar información con Google está a punto de simplificarse ya que la compañía introducirá accesos directos tocables tanto en la aplicación de Google como en la versión web móvil del motor de búsqueda.Una vez que se haya actualizado la aplicación Google, los usuarios de la aplicación Google podrán ver una serie de atajos justo debajo del cuadro de búsqueda . Al tocar la

(Consejos de tecnología y diseño)