Async/Waiting en JavaScript - Conceptos de codificación N

Las funciones asíncronas y la palabra clave Await son las últimas incorporaciones a JavaScript como parte de la versión ECMAScript 2017 que introdujo una nueva forma de escribir funciones asíncronas. En este artículo, explicaremos por qué debemos usar async/await, su sintaxis y uso práctico con ejemplos.

Índice
  1. ¿Por qué Async/Hold?
  2. Sintaxis
    1. asincrónico
    2. esperar
  3. Utilizar
  4. Resumen

¿Por qué Async/Hold?

En el pasado, habrías usado recordatorios para manejar operaciones asíncronas. Sin embargo, las devoluciones de llamada tienen una funcionalidad limitada y, a menudo, conducen a un código inmanejable si está manejando varias llamadas asincrónicas, lo que lleva a un código de devolución de llamada muy anidado, también llamado recordatorio infierno.

Más tarde, promesas se introdujeron en ES6 para superar los problemas de la función de devolución de llamada y mejorar la legibilidad del código. por último Asíncrono/Esperando introducidos en ES2017, que no son más que la versión sintáctica mejorada de las promesas. Su subyacente es Promise con una sintaxis mejorada que proporciona,

  • mejor forma de encadenar promesas y pasar valores entre promesas encadenadas
  • código más conciso y legible en comparación con las promesas
  • la depuración es fácil
  • mejor manejo de errores

Lea también esta publicación para obtener más detalles sobre las promesas en javascript

Sintaxis

asincrónico

Cuando async La palabra clave se aplica antes de una función, se convierte en una función asíncrona y siempre devuelve un objeto de promesa.

1async function hello() {
2  //return Promise.resolve("Hello");
3  return "Hello";
4}
5
6console.log(hello());
7hello().then(data => console.log(data));

Output

Promise {<resolved>: "Hello"} Hello

Vemos en el fragmento de código anterior que cuando ejecutamos la función asíncrona hello(), envuelve el valor de cadena en el objeto de promesa y devuelve una promesa resuelta. También podemos devolver explícitamente el objeto de promesa resuelto, las líneas 2 y 3 son iguales.

Hemos utilizado adicionalmente then en el objeto de promesa resuelto para obtener Buenos dias cadena (línea 7)

esperar

// works only inside async functions
let value = await promise;

await La palabra clave solo funciona dentro de la función asíncrona y hace que la función espere hasta que se liquide la promesa devuelta (resuelta o rechazada).

 1async function hello() {
 2  let promise = new Promise((resolve, reject) => {
 3    setTimeout(() => resolve("Hello"), 5000)
 4  });
 5
 6  let value = await promise; // wait until the promise resolves
 7
 8  return value;
 9}
10
11hello().then(data => console.log(data));

Tenga en cuenta que en el fragmento de código anterior cuando ejecutamos la función asíncrona hello()la ejecución de la función literalmente espera 5 segundos en la línea 6 antes de devolver el objeto de promesa resuelto. UPC los recursos no se utilizan durante este período de espera y se pueden utilizar para otros trabajos.

También tenga en cuenta que si utiliza await palabra clave dentro de la función no asíncrona, devuelve Error de sintaxis como a continuación:

function hello() {
  let promise = Promise.resolve("Hello");
  let value = await promise; ⓧ Uncaught SyntaxError: await is only valid in async function
  return value;
}

Utilizar

Veamos uno de los ejemplos prácticos de obtención de datos de múltiples HTTP endpoints usando la API de recuperación.

1. Crea tres objetos de promesa

Hemos creado una función común. getData y lo usó para crear tres objetos de promesa parametrizados getUser, getPosts y getComments para recuperar datos de sus HTTP punto final.

//create a common getData function
let getData = (url) => new Promise(function (resolve, reject ){
  fetch(url)
    .then(response => {
        return response.json();
    })
    .then(data => {
        resolve(data);
    })
    .catch(error => {
        reject(error);
    });
});

//create multiple promises from common getData function
let getUsers = getData('https://jsonplaceholder.typicode.com/users');
let getPosts = (userId) => getData(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`);
let getComments = (postId) => getData(`https://jsonplaceholder.typicode.com/comments?postId=${postId}`);

2. Secuencia de promesas

Nuestro objetivo es recuperar todos los comentarios en la primera publicación del primer usuario.

Primero buscamos a todos los usuarios de getUsers promesa y encadenándola con getPost promesa de paso primer usuario. Continuando de nuevo con getComments promesa de paso Primer comentario.

//promise chaining of multiple asynchronous calls
getUsers.then(users => {
  let firstUser = users[0];
  return getPosts(firstUser.id);
}).then(posts => {
  let firstPost = posts[0];
  return getComments(firstPost.id);
}).then(comments => {
  console.log(comments);
}).catch(error => console.error(error));

Output

▼ (5) [{…}, {…}, {…}, {…}, {…}] ➤ 0: {postId: 1, id: 1, name: "id labore ex et quam laborum", email: "Eliseo@gardner.biz", body: "laudantium enim quasi est quidem magnam voluptate …utem quasi↵reiciendis et nam sapiente accusantium"} ➤ 1: {postId: 1, id: 2, name: "quo vero reiciendis velit similique earum", email: "Jayne_Kuhic@sydney.com", body: "est natus enim nihil est dolore omnis voluptatem n…iatur↵nihil sint nostrum voluptatem reiciendis et"} ➤ 2: {postId: 1, id: 3, name: "odio adipisci rerum aut animi", email: "Nikita@garfield.biz", body: "quia molestiae reprehenderit quasi aspernatur↵aut …mus et vero voluptates excepturi deleniti ratione"} ➤ 3: {postId: 1, id: 4, name: "alias odio sit", email: "Lew@alysha.tv", body: "non et atque↵occaecati deserunt quas accusantium u…r itaque dolor↵et qui rerum deleniti ut occaecati"} ➤ 4: {postId: 1, id: 5, name: "vero eaque aliquid doloribus et culpa", email: "Hayden@althea.biz", body: "harum non quasi et ratione↵tempore iure ex volupta…ugit inventore cupiditate↵voluptates magni quo et"} length: 5 ➤ __proto__: Array(0)

3. asincrónico/espera

Logremos el mismo objetivo de recuperar comentarios usando async/await,

//async and await makes code cleaner and readable
async function getCommentsOfFirstPostByFirstUser(){
  let users = await getUsers;
  let firstUser = users[0];
  let posts = await getPosts(firstUser.id);
  let firstPost = posts[0];
  let comments = await getComments(firstPost.id);
  return comments;
}

getCommentsOfFirstPostByFirstUser().then(comments => console.log(comments));

Output

▼ (5) [{…}, {…}, {…}, {…}, {…}] ➤ 0: {postId: 1, id: 1, name: "id labore ex et quam laborum", email: "Eliseo@gardner.biz", body: "laudantium enim quasi est quidem magnam voluptate …utem quasi↵reiciendis et nam sapiente accusantium"} ➤ 1: {postId: 1, id: 2, name: "quo vero reiciendis velit similique earum", email: "Jayne_Kuhic@sydney.com", body: "est natus enim nihil est dolore omnis voluptatem n…iatur↵nihil sint nostrum voluptatem reiciendis et"} ➤ 2: {postId: 1, id: 3, name: "odio adipisci rerum aut animi", email: "Nikita@garfield.biz", body: "quia molestiae reprehenderit quasi aspernatur↵aut …mus et vero voluptates excepturi deleniti ratione"} ➤ 3: {postId: 1, id: 4, name: "alias odio sit", email: "Lew@alysha.tv", body: "non et atque↵occaecati deserunt quas accusantium u…r itaque dolor↵et qui rerum deleniti ut occaecati"} ➤ 4: {postId: 1, id: 5, name: "vero eaque aliquid doloribus et culpa", email: "Hayden@althea.biz", body: "harum non quasi et ratione↵tempore iure ex volupta…ugit inventore cupiditate↵voluptates magni quo et"} length: 5 ➤ __proto__: Array(0)

Resumen

Vemos que async/await es mucho más fácil de usar que las promesas.

Si quieres conocer otros artículos parecidos a Async/Waiting en JavaScript - Conceptos de codificación N puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas