Encadenamiento de promesa js: orden de ejecuci贸n

Este art铆culo puede resultarle 煤til si:

  • tiene un conocimiento b谩sico de las promesas de ES6,
  • pero tiene algunas dudas sobre c贸mo funciona el encadenamiento de promesas.

Promise.resolve () notaci贸n abreviada

const hi = Promise.resolve(6) 

es lo mismo que

const hi = new Promise((resolve, reject) => {
resolve
(6)
})

Y podemos acceder 6con hi.then((value_6))ahora.

Orden de ejecuci贸n de la promesa

Mientras que las promesas m谩s altas se ejecutan, las promesas ubicadas m谩s bajas (a煤n no creadas con / ) est谩n en estado pendiente . Baja s y es iniciar la ejecuci贸n tan pronto como la promesa que se alimentan (valor de retorno de otra promesa, por ejemplo , ) consigue resolver o rechazada .new PromisePromise.resolve

thencatchPromise.resolve(1)Promise.resolve(2)

Promise.resolve(1)
.then(() => {
return Promise.resolve(2);
// when we arrive to this line, const hi = Promise.resolve(2) promise starts execution.
// when :hi is resolved, all thens, that are attached to it, - get fired.
// in our case, only the next :then is attached.
// If :hi got rejected, the closest :catch would get fired.
}).then((value) => {
console
.log(value) //=> 2
return Promise.reject(3)
}).then(() => {
// is never executed
}).catch((value) => {
console
.log(value) //=> 3
return Promise.reject(4)
}).catch((value) => {
console
.log(value) //=> 4
return 5 // same as Promise.resolve(5)
}).then((value) => {
console
.log(value) //=> 5
// notice we returned nothing. same as Promise.resolve(undefined)
}).then((value) => {
console
.log(value) //=> undefined
});

Ejemplo del mundo real

fetch('google.com')
.then((response) => {
return response.json(); // converting response to json take some time too, so they made it a promise (so that other code of ours isn't stuck waiting for json convertion). so we are returning a promse.
}).then((jsonedResponse) => {
console
.log(jsonedResponse); // { data: 'someData' }
}).catch((error) => {
// this catch will get executed if either fetch() or json() promises get rejected.
// if we wanted to handle fetch() and json() promise rejections separately, we would place two cathes, with first one coming after fetch().
})

Algunos otros recursos

  • Promesas de ES6 en profundidad > Tenga en cuenta que d贸nde enfoca sus reacciones en los asuntos.
  • Cadenas de promesas din谩micas > Aqu铆 est谩 la cosa: una funci贸n de promesa y sus declaraciones .then todas devuelven promesas. Duh, 驴verdad? Pero lo que hay que tener en cuenta es que devuelven la promesa m谩s reciente.