The problem begins with the fact that the 2
and the 4
be written asynchronously, so if you let it all roll normally they will be written at the end.
I start by saying that this example is still doable without Promises, but it is not a scalable solution:
console.log("1");
setTimeout(() => {
console.log("2");
console.log("3");
setTimeout(() => console.log("4"),1000);
},1500);
Simple example
Before you start with Promises, you need to understand what they’re for and how they’re used in really simple scenarios. Imagine you want to show a number on your console using a Promise and a setTimeout
so that the writing is timed.
In that case I could do so:
const timer = new Promise((resolve, reject) => {
setTimeout(() => resolve(10), 1000);
});
timer.then(valor => console.log(valor));
Notice that Promise gets two callbacks a success usually called resolve
and an error commonly called reject
. When does resolve
within Promise is executing the received function by passing the success value. We then call the .then
passing the success function that is:
valor => console.log(valor)
Which logs the received value. I chose to write with Arrow Function to be simpler and more compact, but can also be written with normal function:
timer.then(function(valor){
console.log(valor);
});
The same applies to the rest of the functions in the example. See the same example entirely without Arrow Functions:
const timer = new Promise(function(resolve, reject){
setTimeout(function(){
resolve(10)
}, 1000);
});
timer.then(function(valor){
console.log(valor)
});
Encadeando Promisses
One of the main goals of Promises is to be able to chain the various calls with then
avoiding nesting. Nesting would be greater depending on the amount of chained things you want to do. If any error arises in any of the Precedents in the chain he will be caught by catch
.
See the first example rewritten with Promises:
const timer2 = new Promise((resolve, reject) => {
setTimeout(() => resolve("2"),1500);
});
console.log("1");
timer2.then(valor => {
console.log(valor);
console.log("3");
return new Promise((resolve, reject) => {
setTimeout(() => resolve("4"),1000);
});
}).
then(valor => console.log(valor));
Async and Await
Just as a final note, I leave here the tip that async
and await
are much easier to work, staying in a style closer to conventional when not working with asynchronous functions. It is important to first understand how Promises work because this alternative is based on them.
I won’t go into detail because @epx has already given an idea to go this way.
Friend, sorry to bother you, but in this case it executes op1, which takes a value Random, if it is greater than or equal to 0.75 it gives error, if not it gives a fullfill(n). What would this fullfill be? Thank you!
– Matheus Rocha
"Fulfill" means "fulfill", in the sense of "fulfill the promise". Actually it is a callback passed as parameter passed by Promise and the variable could have any other name, like "ok", "good", "fulfill", whatever you wish.
– epx
@Matheusrocha O Fulfill used in the example is what is most commonly called
resolve
in the common code with Promisses– Isac