freeCodeCamp/guide/spanish/javascript/await-promises/index.md

124 lines
3.7 KiB
Markdown
Raw Normal View History

2018-10-12 19:37:13 +00:00
---
title: Await Promises
localeTitle: Aguarda promesas
---
## Aguarda promesas
Los [operadores](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) `async` / `await` facilitan la implementación de muchas promesas async. También permiten que los ingenieros escriban códigos más claros, concisos y verificables.
2018-10-29 12:49:46 +00:00
Para comprender este tema, debes tener una comprensión sólida de cómo funcionan las [promesas](https://guide.freecodecamp.org/javascript/promises) .
2018-10-12 19:37:13 +00:00
* * *
## Sintaxis basica
2018-10-29 12:49:46 +00:00
```javascript
2018-10-12 19:37:13 +00:00
2018-10-29 12:49:46 +00:00
function slowlyResolvedPromiseFunc(string) {
return new Promise(resolve => {
setTimeout(() => {
resolve(string);
}, 5000);
});
}
async function doIt() {
const myPromise = await slowlyResolvedPromiseFunc("foo");
console.log(myPromise); // "foo"
}
2018-10-12 19:37:13 +00:00
2018-10-29 12:49:46 +00:00
doIt();
2018-10-12 19:37:13 +00:00
```
2018-10-29 12:49:46 +00:00
Hay algunas cosas a tener en cuenta:
* La function que abarca la declaración de `await` debe incluir el operador `async`. Esto le dirá al intérprete de JS que debe esperar hasta que la Promesa se resuelva o rechace.
* El operador `await` debe estar dentro de linea, durante la declaración de const.
* Esto funciona para `reject` tan bien como para `resolve`.
2018-10-12 19:37:13 +00:00
---
2018-10-29 12:49:46 +00:00
## Promesas Anidadas vs. `Async` / `Await`
Implementar una sola promesa es bastante sencillo. En contraste, promesas encadenadas o la creación de un patrón de dependencia puede producir "código spaguetti".
2018-10-12 19:37:13 +00:00
2018-10-29 12:49:46 +00:00
Los siguientes ejemplos asumen que la libreria <a href='https://github.com/request/request-promise' target='_blank' rel='nofollow'>`request-promise`</a> está disponible como `rp`.
2018-10-12 19:37:13 +00:00
2018-10-29 12:49:46 +00:00
### Promesas Encadenadas/Anidadas
2018-10-12 19:37:13 +00:00
2018-10-29 12:49:46 +00:00
```javascript
// Primera promesa const fooPromise = rp ("http://domain.com/foo");
fooPromise.then (resultFoo => {
// Debe esperar a que "foo" se resuelva
console.log (resultFoo);
const barPromise = rp("http://domain.com/bar");
const bazPromise = rp("http://domain.com/baz");
return Promise.all([barPromise, bazPromise]);
}). then (resultArr => {
// Maneja las resoluciones "bar" y "baz" aquí
console.log (resultArr \[0\]);
console.log (resultArr \[1\]); });
2018-10-12 19:37:13 +00:00
```
2018-10-29 12:49:46 +00:00
### `async` and `await` Promises
2018-10-12 19:37:13 +00:00
2018-10-29 12:49:46 +00:00
```javascript
2018-10-12 19:37:13 +00:00
2018-10-29 12:49:46 +00:00
// Envolver todo en una función asíncrona
2018-10-12 19:37:13 +00:00
2018-10-29 12:49:46 +00:00
async function doItAll () {
// Agarra los datos del endpoint "foo", pero espera la resolución
console.log (await rp ("http://domain.com/foo"));
// Iniciar al mismo tiempo las siguientes dos llamadas async
// No esperes a que "bar" llame a "baz"
const barPromise = rp("http://domain.com/bar");
const bazPromise = rp("http://domain.com/baz");
2018-10-12 19:37:13 +00:00
2018-10-29 12:49:46 +00:00
// Después de que ambas estén comenzadas, espera por ambas
const barResponse = await barPromise;
const bazResponse = await bazPromise;
2018-10-12 19:37:13 +00:00
2018-10-29 12:49:46 +00:00
console.log(barResponse);
console.log(bazResponse);
2018-10-12 19:37:13 +00:00
}
// Finalmente, invocar la función asíncrona. doItAll (). then (() => console.log ('Done!'));
```
2018-10-29 12:49:46 +00:00
Las ventajas de usar `async` y `await` deben ser claras. Este código es más redactable, modular, y testeable.
2018-10-12 19:37:13 +00:00
2018-10-29 12:49:46 +00:00
Es justo tener en cuenta que a pesar de que hay un sentido adicional de concurrencia, el proceso computacional subyacente es el mismo que el del ejemplo anterior.
2018-10-12 19:37:13 +00:00
---
2018-10-29 12:49:46 +00:00
## Manejando Errors / Rejection
2018-10-12 19:37:13 +00:00
2018-10-29 12:49:46 +00:00
Un bloque try-catch básico maneja una promesa rechazada.
```javascript
2018-10-12 19:37:13 +00:00
2018-10-29 12:49:46 +00:00
async function errorExample () {
2018-10-12 19:37:13 +00:00
2018-10-29 12:49:46 +00:00
try {
const rejectedPromise = await Promise.reject ("Oh-oh!");
} catch (error) {
console.log (error); // "¡UH oh!"
}
}
errorExample ();
```
2018-10-12 19:37:13 +00:00
* * *
#### Más información:
2018-10-29 12:49:46 +00:00
* Operador `await` [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await)
* Operador `async` [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/async_function)