Dada una serie de Promesas, tenemos que ejecutar eso en una serie. Para realizar esta tarea, podemos usar then(), para ejecutar la siguiente promesa, después de completar una promesa.
Enfoque : El método then() devuelve una Promesa, que nos ayuda a enstringr promesas/métodos. El método Promise.resolve() ejecuta la primera devolución de llamada y, cuando se cumple esta promesa, pasa a la siguiente función callback1 y continúa hasta que se cumplen todas las promesas. De esta forma, podemos ejecutar todas las Promesas en serie.
Sintaxis:
Promise.resolve( callback0 ) .then( callback1 ) .then( callback2 ) .then( callback3 )...
Ejemplo 1: En este ejemplo, ejecutaremos 3 promesas enstringndo cada una de ellas con el método then().
HTML
<html>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<b>Promises</b>
<script>
// Define an asynchronous function,
// results in returning a promise
async function task(url) {
console.log(url + " will be fetched now")
return fetch(url);
}
// Declaring an array of URLs
let arr = [
"https://www.google.com",
"https://www.facebook.com",
"https://www.twitter.com"
];
// Resolving the first task
Promise.resolve(() => {
return task(arr[0]);
})
// Resolving the second task
.then(() => {
return task(arr[1]);
})
// Resolving the third task
.then(() => {
return task(arr[2]);
});
</script>
</body>
</html>
Producción:
https://www.facebook.com will be fetched now https://www.twitter.com will be fetched now
El enfoque anterior no es factible si hay muchas más promesas en la array. El enstringmiento de la función sería muy agotador y haría que el código fuera largo. Podemos usar la función de array forEach() para ejecutar las promesas almacenando los resultados en una variable y actualizando esa variable en cada promesa. Esto pasará automáticamente por todas las promesas y uno puede evitar escribir repetidamente las declaraciones the () .
Ejemplo 2: en este ejemplo, ejecutaremos varias promesas utilizando el método forEach().
HTML
<html>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<b>Promises</b>
<script>
// Define an asynchronous function
async function task(url) {
return fetch(url);
}
// Define array that has to be processed
// by the asynchronous function
let arr = [
"https://www.google.com",
"https://www.facebook.com",
"https://www.twitter.com",
"https://www.youtube.com",
"https://www.netflix.com",
];
// Declare a Promise using its resolve constructor
let promise = Promise.resolve();
// Use the forEach function to evaluate
// the promises in series
// The value of
// p would be the result
// of previous promise
arr.forEach((url, index) => {
promise = promise.then(() => {
let para = document.createElement("p");
para.innerText =
"The async request of " + url +
" has been resolved";
document.body.appendChild(para);
return task(url);
});
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por ManishKhetan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA