Comenzando con las promesas de JavaScript

Codigo asincrono Es útil para realizar tareas que son pérdida de tiempo pero, por supuesto, es no exento de contras. Usos de código asíncrono funciones de devolución de llamada Para procesar sus resultados, sin embargo las funciones de devolución de llamada. no puede devolver valores que las funciones típicas de JavaScript pueden.

Por lo tanto, no solo nos quitan la capacidad de controlar el ejecución de la función pero también hacer manejo de errores un poco de una molestia Aquí es donde el Promesa objeto Entra, ya que pretende rellenar algunos de los Baches en codificación asíncrona..

Promesa es técnicamente un objeto interno estándar en JavaScript, lo que significa que viene incorporado a JavaScript. Se utiliza para representar el Resultado final de un bloque de código asíncrono. (o la razón por la cual el código falló) y tiene métodos para controlar el Ejecución del código asíncrono..

Sintaxis

Podemos crear una instancia de la Promesa objeto utilizando la nuevo palabra clave:

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

La función pasado como un parámetro al Promesa() constructor es conocido como el albacea. Contiene el código asíncrono y tiene dos parámetros de la Función tipo, denominado resolver y rechazar funciones (más sobre estos en breve).

Estados de la Promesa objeto

los estado inicial de un Promesa objeto se llama pendiente. En este estado, el resultado de la computación asíncrona. no existe.

El estado inicial pendiente cambia a cumplido Estado cuando el cálculo es exitoso. los resultado de la computación está disponible en este estado.

En el caso de la computación asíncrona. falla, la Promesa objeto se mueve a la rechazado Estado desde su inicial pendiente estado. En este estado, el razón de la falla de cálculo (es decir, un mensaje de error) está disponible.

Ir de pendiente a cumplido estado, resolver() se llama. Ir de pendiente a rechazado estado, rechazar() se llama.

los entonces y captura metodos

Cuando el estado cambios de pendiente a cumplido, el controlador de eventos de la Promesa objetos entonces método es ejecutado. Y cuando el estado cambios de pendiente a rechazado, el controlador de eventos de la Promesa objetos captura método es ejecutado.

Ejemplo 1

“No Promisificado” código

Supongamos que hay un hola.txt archivo que contiene el “Hola” palabra. Así es como podemos escribir una solicitud AJAX para buscar ese archivo y mostrar su contenido, sin usar el Promesa objeto:

 function 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: lanzar 'Error al recuperar el archivo';  catch (err) console.log (err);  getTxt (); 

Si el contenido del archivo ha sido alcanzado con éxito, es decir. El código de estado de respuesta es 200., el texto de respuesta es escrito en el documento. Si el archivo es no encontrado (estado 404), una “Archivo no encontrado” se lanza un mensaje de error. De lo contrario, un mensaje de error general lo que indica el fallo de recuperar el archivo es lanzado.

“Promisificado” código

Ahora vamos a Promise el código anterior:

 función getTxt () devolver nueva Promesa (función (resolver, rechazar) dejar xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () switch (this.status) caso 200: resolver (this.response); caso 404: rechazar ('Archivo no encontrado'); predeterminado: rechazar ('No se pudo buscar el archivo ');;);  getTxt (). then (function (txt) document.write (txt);). catch (function (err) console.log (err);); 

los getTxt () la función ahora está codificada para devolver una nueva instancia de la Promesa objeto, y su función ejecutora contiene el código asíncrono de antes.

Cuando el código de estado de respuesta es 200, la Promesa es cumplido por vocación resolver() (La respuesta se pasa como el parámetro de resolver()). Cuando el código de estado es 404 o algún otro, el Promesa es rechazado utilizando rechazar() (con el mensaje de error apropiado como el parámetro de rechazar()).

los controladores de eventos para el entonces() y captura() metodos del Promesa objeto son añadido al final.

Cuando el Promesa es cumplido, el manejador de la entonces() se ejecuta el metodo Su argumento es el parámetro pasado de resolver(). Dentro del controlador de eventos, el texto de respuesta (recibido como argumento) es escrito en el documento.

Cuando el Promesa es rechazado, el controlador de eventos de la captura() el metodo se ejecuta, registrar el error.

los ventaja principal de la versión Promisificada del código anterior es la manejo de errores. En lugar de lanzar Excepciones no detectadas, como en la versión No Prometida, la mensajes de falla apropiados son devueltos y registrados.

Pero, no es sólo el regresando del mensajes de falla sino también de la Resultado de la computación asíncrona. Eso puede ser verdaderamente ventajoso para nosotros. Para ver eso, tendremos que ampliar nuestro ejemplo..

Ejemplo 2

“No Promisificado” código

En lugar de simplemente mostrar el texto de hola.txt, quiero combínalo con el “Mundo” palabra y mostrarlo en la pantalla después de un tiempo de espera de 2 segundos. Aquí está el código que utilizo:

 function 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: lanzar 'Error al recuperar el archivo';  catch (err) console.log (err);  function concatTxt (res) setTimeout (function () return (res + 'World'), 2000);  getTxt (); 

En el código de estado 200, el concatTxt () la función está llamada a concatenar el texto de respuesta con el “Mundo” palabra antes de escribirlo en el documento.

Pero, este código no funcionará como se desea. los setTimeout () función de devolución de llamada no puede devolver la cadena concatenada. Lo que se imprimirá en el documento es indefinido porque eso es qué concatTxt () devoluciones.

“Promisificado” código

Entonces, para hacer que el código funcione, vamos a Promise el código anterior, incluso concatTxt ():

 función getTxt () devolver nueva Promesa (función (resolver, rechazar) dejar xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () switch (this.status) caso 200: resolver (this.response); caso 404: rechazar ('Archivo no encontrado'); predeterminado: rechazar ('No se pudo buscar el archivo ');;);  function concatTxt (txt) devolver nueva Promesa (función (resolver, rechazar) setTimeout (function () resolver (txt + 'Mundo');, 2000););  getTxt (). then ((txt) => return concatTxt (txt);). then ((txt) => document.write (txt);). catch ((err) => console. log (err);); 

Al igual que getTxt (), la concatTxt () función también devuelve un nuevo Promesa objeto En lugar del texto concatenado. los Promesa devuelto por concatTxt () es resuelto dentro de la función de devolución de llamada de setTimeout ().

Cerca del final del código anterior, el controlador de eventos de la primera entonces() método se ejecuta cuando el Promesa de getTxt () es cumplido, es decir, cuando el archivo es recuperado exitosamente. Dentro de ese manejador, concatTxt () se llama y el Promesa devuelto por concatTxt () es regresado.

El controlador de eventos del segundo. entonces() método se ejecuta cuando el Promesa devuelto por concatTxt () es cumplido, es decir, el el tiempo de espera de dos segundos ha terminado y resolver() se llama con la cadena concatenada como su parámetro.

Finalmente, captura() Atrapa todas las excepciones y mensajes de error. de ambas promesas.

En esta versión Promisificada, la “Hola Mundo” cadena será impresa exitosamente al documento.