In JavaScript we uses promises for handling async API calls. In JavaScript the Promise takes one argument as a callback containing 2 parameters resolve and reject.
If promise is fulfilled the resolve function will be called and if promise is not fulfilled reject function will be called.
Let me explain with some example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<script>
var classResult = new Promise((resolve,reject)=>{
let marksObtained = 85;
if(marksObtained >= 80){
resolve('I am the college topper.');
}
else{
reject('I was failed.')
}
});
var gotMedal = new Promise((resolve,reject)=>{
let isTopper = true;
if(isTopper){
resolve('I got the medal.');
}
else{
reject('I got nothing.');
}
});
classResult.then((response)=>{
console.log(response);
})
.catch((error)=>{
console.log(error)
});
gotMedal.then((response)=>{
console.log(response);
})
.catch((error)=>{
console.log(error)
});
</script>
|
Here in this example I have defined 2 promises one is classResult and other is gotMedal. classResult and gotMedal returns promises. If promise resolved then code block executes else catch code block executes.
Here in this example both promises are executing independently. But there might be a case if second API request need to send some parameters of first API call response this means second promise will wait until first promise returns the response. Below is the example of dependent promises:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
<script>
var classResult = function(){
return new Promise((resolve,reject)=>{
let marksObtained = 85;
if(marksObtained >= 80){
resolve('I am the college topper.');
}
else{
reject('I was failed.')
}
});
}
var gotMedal = function(message){
return new Promise((resolve,reject)=>{
let isTopper = true;
if(isTopper){
resolve(message+' and I got the medal.');
}
else{
reject(message+' and I got nothing.');
}
});
}
var meetPresident = function(message){
return new Promise((resolve,reject)=>{
let isProgrammer = true;
if(isProgrammer){
resolve(message+' and I meet the president.');
}
else{
reject(message+' and I did not get chance to meet with president.');
}
});
}
classResult().then((response)=>{
return gotMedal(response);
}).
then((response)=>{
return meetPresident(response);
})
.then((response)=>{
console.log(response);
})
.catch((error)=>{
console.log(error)
});
</script>
|
Here int this example if student obtained marks are greater than or equal to 80 then we resolve the promise and execute the gotMedal promise. If student is topper then we execute the meetPresident promise. So here all 3 promises are dependent to each other.
There might be a case when all these 3 promises are independent then we can execute these all promises by Promise.all().
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<script>
var classResult = function(){
return new Promise((resolve,reject)=>{
let marksObtained = 85;
if(marksObtained >= 80){
resolve('I am the college topper.');
}
else{
reject('I was failed.')
}
});
}
var gotMedal = function(message){
return new Promise((resolve,reject)=>{
let isTopper = true;
if(isTopper){
resolve(message+' and I got the medal.');
}
else{
reject(message+' and I got nothing.');
}
});
}
var meetPresident = function(message){
return new Promise((resolve,reject)=>{
let isProgrammer = true;
if(isProgrammer){
resolve(message+' and I meet the president.');
}
else{
reject(message+' and I did not get chance to meet with president.');
}
});
}
Promise.all([classResult(), gotMedal(),meetPresident()]).then((response)=>{
console.log(response);
})
.catch((error)=>{
console.log(error);
})
</script>
|
Promise.all() executes all 3 function asynchronously and you will execute the then callback once all the requests are resolved else catch block will be executed.
Now there might be case that you have 6 API calls but once you got response any one of them then you don't wanted to wait for others.
We use Promise.race() for this. For example you have similar data on 3 servers and you you send all 3 request to each server once you get response from any one server you will not love to wait for others 2 servers response.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<script>
var classResult = function(){
return new Promise((resolve,reject)=>{
let marksObtained = 85;
if(marksObtained >= 80){
resolve('I am the college topper.');
}
else{
reject('I was failed.')
}
});
}
var gotMedal = function(message){
return new Promise((resolve,reject)=>{
let isTopper = true;
if(isTopper){
resolve(message+' and I got the medal.');
}
else{
reject(message+' and I got nothing.');
}
});
}
var meetPresident = function(message){
return new Promise((resolve,reject)=>{
let isProgrammer = true;
if(isProgrammer){
resolve(message+' and I meet the president.');
}
else{
reject(message+' and I did not get chance to meet with president.');
}
});
}
Promise.race([classResult(), gotMedal(),meetPresident()]).then((response)=>{
console.log(response);
})
.catch((error)=>{
console.log(error);
})
</script>
|