asíncrono y espera -

Las promesas de JavaScript fueron una revelación en JavaScript, brindando una alternativa al infierno de devolución de llamadas de JavaScript en el que nos encontramos rápidamente. Las promesas también nos permitieron introducir y manejar mejores tareas asincrónicas. Si bien las promesas fueron una mejora con respecto al infierno de las devoluciones de llamadas, todavía requieren muchos thencorreos electrónicos que pueden resultar complicados. Realmente utilizó las palabras clave asyncy de ES2017 awaitpara simplificar el manejo de promesas. ¡Echemos un vistazo a asyncy await!

Conceptos básicos rápidos

• asynces una palabra clave para la declaración de función
• awaitse utiliza durante el manejo de la promesa
• awaitdebe usarse dentro de una asyncfunción, aunque Chrome ahora admite el “nivel superior”await
• asyncLas funciones devuelven una promesa, independientemente de cuál returnsea el valor dentro de la función.
• async/ awaity las promesas son esencialmente las mismas bajo el capó
• Disponible ahora en la mayoría de los navegadores, así como en Node.js.

Beneficios de asyncyawait

• Tu código es más simplista y preciso.
• La depuración es más fácil gracias a menos devoluciones de llamadas
• La conversión de promesa then/ catchcódigo es fácil
• Su código puede ser más “de arriba hacia abajo”, menos anidado

asyncIlustración básica await_

Siempre es más fácil aprender con un ejemplo, así que echamos un vistazo a un uso muy asyncsimple await:

// Función declarada como async por lo que se puede usar awaitasync function fetchContent() { // En lugar de usar fetch(). Luego, usa await let content = await fetch('/'); let text = contenido esperar.text(); // Dentro del texto de la función asíncrona está el cuerpo de la solicitud console.log(text); // Resuelve esta función asíncrona con el texto return text;}// Usa la función asíncronavar promesa = fetchContent().then(...);

Comience declarando la función como async; esta declaración permite awaitser utilizada desde dentro. Luego, a la awaitpalabra clave le sigue una acción que cumple una promesa, que por supuesto es la fetchAPI. La rutina asincrónica ( fetchen este caso) se ejecuta y la ejecución de código adicional se detiene (aunque no se bloquea) hasta que finaliza la acción asincrónica. Luego, la función se resuelve con el returnvalor y se devuelve una promesa.

Básicamente, puedes mantener tu código “en línea” sin necesidad de devoluciones de llamada. ¡Es asíncrono hecho un poco más simple!

Conversión del manejo de promesas aawait

Es muy probable que desee actualizar su código de promesa cuando haya tiempo disponible. Repasemos la promesa de actualización para await:

// Before: callback city!fetch('/users.json')  .then(response = response.json())  .then(json = {    console.log(json);  })  .catch(e = { console.log('error!'); })// After: no more callbacks!async function getJson() {  try {    let response = await fetch('/users.json');    let json = await response.json();    console.log(json);  }  catch(e) {    console.log('Error!', e);  }}

The conversion from loads of thens to awaitis simple to execute and your code hopefully looks a bit maintainable!

async / await Patterns

There are a number of ways you can declare asyncfunctions.

Anonymous Async Function

let main = (async function() {  let value = await fetch('/');})();

Async Function Declaration

async function main() {  let value = await fetch('/');};

Async Function Assignment

let main = async function() {  let value = await fetch('/');};// Arrow functions too!let main = async () = {  let value = await fetch('/');};

Async Function as Argument

document.body.addEventListener('click', async function() {  let value = await fetch('/');});

Object Class Methods

// Object propertylet obj = {  async method() {    let value = await fetch('/');  }};// Class methodsclass MyClass {  async myMethod() {    let value = await fetch('/');  }}

As you can see, adding asyncis really easy and accommodates all function creation workflows!

Error Handling

Traditional promise use allows you to use a catchcallback to handle rejection. When you use await, your best bet is using try/catch:

try {  let x = await myAsyncFunction();}catch(e) { // Error!}

The old try/catchisn’t as glamorous as a promise’s catch callback but is just as effective.

Parallelism

Google’s Jake Archibald make excellent points in theAsync functions document about not getting too sequential with your awaits. The idea is to avoid stacking awaits, when possible, and instead trigger tasks immediately and use awaitafter said tasks are triggered:

// Will take 1000ms total!async function series() {  await wait(500);  await wait(500);  return "done!";}// Would take only 500ms total!async function parallel() {  const wait1 = wait(500);  const wait2 = wait(500);  await wait1;  await wait2;  return "done!";}

The first block is bad because the second wait happens after the the first wait completes. The second block is a better method: trigger both waitcalls and then use await; doing so allows the async functions to happen concurrently!

Promise.all Equivalents

Una de mis funciones favoritas de Promise API es Promise.all, que activa una devolución de llamada cuando se completan todas las recuperaciones. No hay asyncun awaitequivalente directo, pero esta publicación proporciona un buen equivalente:

let [foo, bar] = await Promise.all([getFoo(), getBar()]);

Recuerda que en el fondo async/ awaitson esencialmente lo mismo que las promesas, por lo que simplemente estamos esperando que se resuelva la promesa agregada.

Ahora puede utilizar asyncy awaiten todos los principales navegadores. Estas nuevas palabras clave también están disponibles en Node.js; Las versiones anteriores de Node.js pueden usar el transform-async-to-generatorcomplemento babel para usar asyncy awaithoy. Las promesas siguen siendo excelentes, pero se hacen más fáciles de mantener con asyncy await!