Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial de promesas de ES6

 




Los lenguajes de programación modernos tienen una jerga para ellos mismos. Estamos inundados de siglas y palabras que suenan extranjeras todos los días. Hoy, hablaremos de Promesas . Si utiliza a nuestro buen amigo Webster, encontrará algo parecido a esto para el significado de una promesa: una declaración o garantía de que uno hará una cosa en particular o que sucederá una cosa en particular. Los amigos hacen promesas, la familia hace promesas, es probable que usted haga promesas a las personas. Sabes lo que es una promesa. Ahora pensemos en la idea de una promesa en JavaScript. ¿Qué es? Bueno, en pocas palabras, una Promesa de JavaScript es un objeto que está esperando una operación asincrónica completar. Cuando esa operación se completa, la Promesa se cumple o se rechaza. Examinaremos este concepto en este tutorial sobre ES6 Promises.


Devolviendo una promesa

Hay muchas formas de ver las promesas. Todos podríamos entenderlos de manera un poco diferente dependiendo de cómo funcione nuestro cerebro. Una forma común de explicar cómo funciona una promesa en ES6 es configurando una función que devuelva una promesa para inspeccionar cómo funcionan las cosas. Eche un vistazo a este código:

devolviendo una promesa
Así que aquí hay una función llamada return_a_promise()que adivinó, devuelve una promesa. Se puede ver declaramos una variable llamada promisenuevos hasta una promesa objeto. El Promiseconstructor acepta una función como argumento. La función pasada como argumento al propio constructor Promise toma dos argumentos. El primero es la resolución y el segundo es el rechazo . Si queremos que la promesa se resuelva y se cumpla, podemos llamar a la función resolve (). Si nos encontramos con una condición de error, en su lugar llamaríamos a la función de rechazo (). Por lo tanto, todavía no llamamos en este primer fragmento cuando inspeccionamos la consola y vemos "Obteniendo datos, espere". luego, después de un retraso de dos segundos, vemos "Obtuve los productos, buen trabajo".

La función pasada a se new Promiseejecuta inmediatamente.

Lo que queríamos ver en este primer ejemplo es simplemente que cuando crea una Promesa, necesita pasarle una función. Además, esa función se ejecutará de inmediato. Esta es la razón por la que vemos la salida ya en la consola.


Notifique el promise.then()éxito conresolve()

Dado que la función de return_a_promise()los rendimientos una promesa, entonces sabemos que la variable promesa es de hecho una promesa. Específicamente es un objeto de promesa. Si cierra la sesión typeof promise, obtendrá el objeto y si cierra la sesión, promise instance of Promiseserá verdadero . Lo que eso significa es que ahora tenemos acceso a algunos métodos especiales en ese objeto. El primero que veremos es .then().

prometer luego resolver
Observe que en la variable de promesa, ahora estamos llamando a .then () pasándole una función. Todo lo que hace la función es cerrar la sesión "¡La promesa se ha cumplido!" Sin embargo, lo que es interesante es que también agregamos esa llamada a resolve () en el constructor de Promise. ¿Lo ves ahí arriba? Entonces, lo que estamos haciendo aquí es simular una llamada a un servidor para obtener datos o algún tipo de acción asincrónica. La setTimeout()función simplemente está ahí para simular un ligero retraso mientras se espera un recurso. Entonces, después de 2000 milisegundos, o 2 segundos, cerramos la sesión "Obtuve los productos, buen trabajo". Fingimos que acabamos de recuperar los datos que necesitamos del servidor. Bueno, eso es genial, ¿verdad? Dado que tuvo éxito, deberíamos hacer una llamada a resolve () , y eso es exactamente lo que hacemos aquí. Entonces que haceresolve()realmente hacer ?? Bueno, cuando lo llamamos, resolve()en realidad notifica la promesa de éxito y se llama a la primera función a la que se le pasa .then()Es casi como un oyente de eventos. promise.then()es simplemente sentarse esperando que se cumpla o rechace una promesa. Una vez que sabe cuál es, toma la acción apropiada en función de lo que contienen las funciones que se le pasan. En este ejemplo aquí, espera 2 segundos, y como tenemos éxito, llamamos resolve()y se ejecuta el código apropiado.


Notifique el promise.then()éxito conreject()

El éxito no siempre está garantizado. En aquellos casos en los que nos encontremos con una falla, necesitaremos una forma de manejar ese problema. Es casi como lidiar con una excepción. Intentaste hacer algo, pero había un problema, por lo que debes solucionarlo. Considere este nuevo código.

prometer luego rechazar
Esta vez estamos simulando un error del servidor. Entonces, en la Promesa, puede ver que estamos tratando de obtener algunos datos. Después de dos segundos, encontramos que tenemos un código de error 500. No es bueno. No es bueno en absoluto. Dado que ha sido un error, debemos notificar la promesa del error. Eso es exactamente lo que hacemos cuando llamamos rechazar () . Entonces, desde que llamamos reject(), ahora es la segunda función pasada a la promise.then()que se ejecuta. Esta es la función que maneja un rechazo de promesa o un estado de error. En este escenario, simplemente cierra la sesión del mal nuevo que “La promesa es rechazada :-(” En resumen, podemos ver que promise.then () es una función importante que se ocupa de si una promesa se cumplió o se rechaza en su aplicación. Promesa .luego()toma dos funciones como argumentos. La primera función se ejecuta si la promesa se cumple o tiene éxito, y la segunda función se ejecuta si la promesa se rechaza o falla.


Paso de parámetros a resolve()oreject()

Ahora que sabemos cómo funcionan resolver () y rechazar () en las promesas, examinémoslas un poco más de cerca. Una característica interesante de estas dos funciones es que puede pasarles un parámetro. Veamos un ejemplo.

parámetro de paso de promesa para resolver
Observe que eliminamos el registro que teníamos antes en la promesa. Esta vez, simplemente llamamos a la función resolve () y le pasamos una cadena de '200 OK:' como parámetro. Ahora podemos acceder a este valor cuando llamamos a las funciones dentro de promise.then()Entonces, en este ejemplo, asumimos el éxito del servidor. Por esa razón llamamos resolve('200 OK: '); Do al éxito, se promise.then()ejecuta la primera función dentro Observe que ahora aceptamos un messageparámetro para esa función. Cuando cerramos la sesión de la notificación, la incluimos messagecomo parte de la notificación. Como tal, vemos "200 OK: ¡La promesa se ha cumplido!" en la consola. ¡Excelente! En aras de la integridad, aquí está el escenario de rechazo de la promesa.

promesa de pasar parámetro para rechazar


Encadenamiento de then()llamadas a funciones

Aquí refactorizamos el código de varias formas. En primer lugar, no tenemos que llamar let promise = return_a_promise();para guardar la promesa promiseEs tan válido llamarlo así: return_a_promise().then();Además de esto, en realidad se puede cadena de llamadas adicionales a continuación de este modo: return_a_promise().then().then();Veamos este concepto en acción aquí.

encadenando luego llamadas a funciones en una promesa
Dado que la promesa tiene éxito, llamamos resolve()Esto activa la primera función que se le pasa then()Observe que en esa función, después de cerrar la sesión del mensaje, tenemos una línea donde dice return"¡¡Sí !!". Este valor ahora está disponible para la próxima llamada a then()Mira cómo está encadenado al final del primero then()Cuando then()se llama por segunda vez, también acepta un messageargumento; sin embargo, en lugar de que este valor provenga de resolve (), proviene de lo que devolvimos en la primera llamada a then () . ¡Ojalá tenga sentido! El encadenamiento de funciones es bastante común cuando se usa Promises, así como en otros aspectos de JavaScript.


Manejo del rechazo de promesas con .catch()

Si una promesa falla, hemos visto cómo podemos llamar a accept () y la segunda función pasada a promise.then () se activará. Básicamente, así es como manejamos las condiciones de error en la aplicación. Un método alternativo para lidiar con el rechazo de una promesa es utilizar el método catch () de una promesa. Toma una función que se ejecuta si la promesa falla y se llama a fail (). Aquí hay un ejemplo de eso en acción.

prometer captura


Cómo encadenar llamadas asincrónicas juntas usando Promesas

Todos los ejemplos hasta ahora han analizado el uso de una Promesa para completar una llamada asincrónica en su código. ¿Qué sucede si necesita encadenar llamadas asincrónicas juntas? Esto es posible con Promises, y examinaremos cómo hacer eso mismo en esta sección del Tutorial de Promesas de ES6. La forma en que puede lograr el encadenamiento de llamadas asincrónicas a través de Promesas es pasar una función que devuelve una promesa a la función resolve () de la Promesa anterior. ¿Suena incompleto? Veamos un ejemplo.

Para ayudar a llevar el concepto a casa, mostramos aquí una pequeña captura de pantalla del resultado que ocurre en tiempo real. Esto nos da una mejor idea de cómo funcionan las dos llamadas asincrónicas.
múltiples llamadas asincrónicas con promesas


Creación de una promesa al instante sin llamadas asincrónicas

A veces, cuando necesita realizar una llamada asincrónica, es posible que se dé cuenta de que ni siquiera tiene que realizar esa llamada. Esto puede deberse a que los datos ya están disponibles en la memoria caché o por alguna otra razón. En un caso como este, aún puede devolver una promesa si lo desea y luego simplemente hacer uso de las funciones de resolución estática o de rechazo. Al llamar a Promise.resolve (), está creando una promesa que se garantiza que se cumplirá. Por el contrario, al llamar a Promise.reject (), implementa una Promise que se garantiza que será rechazada.

llamando a Promise.resolve ()

Llamando a Promise.reject ()


Cómo utilizar Promise.all()

Promise.all () es otra función estática que puede usar con Promises, más allá de resolve () y replace () con las que ahora estamos familiarizados. Veamos el código y la salida, luego podemos discutir.

Cómo usar Promise all

Entonces, en este ejemplo, creamos dos promesas. Uno es asignado promise1y el otro es asignado promise2Configuramos la primera promesa para que se resuelva después de un segundo y la siguiente promesa para que se resuelva después de tres segundos. Excelente. Después de esto, hacemos una llamada Promise.all()ay pasamos una matriz que contiene cada objeto de promesa que hemos creado. La forma en que funciona Promise.all () es esperar hasta que se resuelvan todas las promesas, y luego se ejecutará la primera función pasada a .then () para informarnos de todas las promesas resueltas. Si se rechaza alguna promesa, la segunda función pasada a .then () se llama inmediatamente.


Cómo usar Promise.race ()

Esta función estática funciona de una manera algo similar a Promise.all () en el sentido de que le pasamos una serie de promesas. Sin embargo, la diferencia es que Promise.race () no espera a que se resuelvan todas las promesas. Tan pronto como ve que al menos uno de ellos se resuelve, se activa la función .then (). Piense en ello como una carrera para ver qué promesas se resuelven o rechazan primero. Tan pronto como eso suceda, se invoca .then ().

Veremos un último ejemplo de Promise.all () frente a Promise.race () para comprender completamente cómo funcionan.


Promise.all () Ejemplo

Cómo usar la promesa de los 2


Ejemplo de Promise.race ()

Cómo usar la carrera de promesa


Resumen del tutorial de promesas de ES6

Las promesas son una forma de representar un resultado final de una operación asincrónica. Proporcionan un medio para manejar el procesamiento asincrónico de una manera más sincrónica. Una promesa es la representación de un valor que puede manejarse en el futuro, y vienen con algunas garantías:

  • las promesas son inmutables
  • las promesas se resuelven o rechazan
  • cuando se resuelve una promesa, tenemos la garantía de recibir un valor
  • cuando se rechaza una promesa, tenemos la garantía de recibir la razón por la cual la promesa no se puede cumplir

Con esta información en mente, nuestro tutorial cubrió mucho terreno. Aprendimos sobre el objeto Promise y cómo crear una función que devuelva una promesa. Dado que las promesas involucran llamadas asincrónicas, usamos la función setTimeout de JavaScript para simular esto en nuestros muchos ejemplos. También observamos que al usar promesas usaremos los métodos resolve () , rechazar () , all () , race () y luego () para manejar los resultados de una promesa. ¡Buen trabajo!

Publicar un comentario

0 Comentarios