Muy buenas, me llamo Luis y hoy les traigo un artículo.
Bienvenido al curso intensivo de Async JS.
Callback, Promises y Async-await son una forma de tratar con datos asincrónicos. La programación asincrónica en JavaScript es una forma en la que el programa no espera hasta que se está ejecutando algo.
Esto resulta útil cuando hacemos una llamada a la API para obtener algunos datos, lo que lleva algún tiempo (tal vez de 2 a 3 segundos). Pero no queremos que nuestro programa deje de ejecutar las siguientes declaraciones y esto se conoce como Async JS.
Entonces, comencemos con un jsbin y abramos JavaScript y Output. Aquí, hemos creado una matriz de publicaciones de objetos, que contiene dos objetos.
Ahora tenemos una función getPosts () y dentro de ella tenemos setTimeout () para imitar la llamada a un servidor API, que se ejecuta con un retraso de 1000 milisegundos. Después de eso, simplemente recorremos las publicaciones y agregamos li y pag que contiene título y resumen de la salida.
Una vez que el forEach está completo, lo agregamos al cuerpo.
Después de eso, tenemos createPost (), que simplemente empuja una nueva publicación a la matriz de publicaciones. Pero se ejecuta después de 2000 milisegundos.
Podemos ver el problema en lo anterior ya que se ejecutó createPost () pero después de un retraso de 2000 ms. Antes de eso, el DOM ya estaba pintado y se ejecutó getPosts ().
Aquí es donde se usa la programación Async y primero veremos la devolución de llamada.
Llamar de vuelta
Para usar la devolución de llamada, pasamos una nueva devolución de llamada de parámetro en createPost (). Luego, después de posts.push (post) , llamamos a callback () . Ahora, en la llamada a createPost (), estamos pasando un segundo parámetro que es la función getPost. Ahora, solo después de que se ejecute posts.push (), se ejecutará getPosts y obtendremos las tres publicaciones.
Promesas
Las promesas son una mejor versión de la devolución de llamada y se introdujeron en ES6. Aquí, no pasamos ningún argumento, sino que envolvemos todo el código en un método Promise y lo devolvemos. Estamos pasando dos parámetros, resolverlo y rechazarlo.
Ahora, siempre que se ejecuta la resolución, se ejecuta el bloque then () de la llamada a la función. Lo estamos haciendo verdadero dando num como 5, de modo que el operador ternario sea verdadero.
Ahora, hagamos que el número sea 4, de modo que el operador ternario sea falso y se ejecute el reject(). Ahora, se ejecutará catch() y se mostrará el error.
Hay otra variación de Promise llamada Promise.all , en la que podemos encadenar promesas y mostrará el resultado una vez que se cumplan todas las promesas, incluida la más lenta. En el siguiente ejemplo, la promesa más lenta es la del código, pero una vez que se resuelve después de 3 segundos, solo se ejecutará then().
Async-await
Ahora, aprenderemos sobre async-await, que es una actualización sobre las promesas. Se llama azúcar sintético sobre promesas, porque bajo el capó son promesas.
De nuevo estamos usando el antiguo ejemplo de Promises. Aquí, estamos creando una nueva función init(), pero con la palabra clave async. Dentro de la función, estamos haciendo createPost () como await. Significa que las funciones posteriores esperarán su resultado. Entonces, nuevamente estamos poniendo todo en orden.
Async-await se usa principalmente con fetch para obtener datos de API externas. Usaremos un buen punto final de API falso para obtener datos de 10 usuarios.
En este caso, estamos usando el await palabra clave en frente del fetch () para obtener los datos de jsonplaceholder API. Con fetch() tenemos que usar await nuevamente en res.json(). Después de eso, simplemente recorre los datos y los muestra en el navegador.
Gracias por leer el artículo.
Añadir comentario