Skip to content

Commit b42a613

Browse files
pkprashantkrpkprashantkr
authored
modified
1 parent 98d6ba5 commit b42a613

1 file changed

Lines changed: 147 additions & 5 deletions

File tree

‎Basics/21_promise.html‎

Lines changed: 147 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Promises in JS</title>
7+
<style>
8+
body{
9+
background-color: black;
10+
color: white;
11+
}
12+
</style>
713
</head>
814
<body>
915
<h1> Hello...... </h1>
@@ -23,9 +29,9 @@ <h1> Hello...... </h1>
2329
- resolve and reject are callbacks provided by JS
2430
2531
- There can be 3 states of promise:
26-
a) Pending : The result is undefined
27-
b) Fulfilled (resolved) : the result is a value (fulfilled)
28-
c) Rejected : the result is an error object
32+
a) Pending : Intial state, neither fulfilled nor rejected. The result is undefined
33+
b) Fulfilled (resolved) : Meaning that the operation was completed successfully the result is a value (fulfilled)
34+
c) Rejected : meaning that the operation failed. The result is an error object
2935
*/
3036

3137
// Pending
@@ -48,10 +54,29 @@ <h1> Hello...... </h1>
4854

4955
// Example question of Promise: Resolving promise after 5 sec.
5056

57+
// creating promise
5158
const p = new Promise((resolve, reject) => {
5259
setTimeout(() => {
53-
resolve("Resolved Promise")
54-
}, 5000)
60+
let error = false
61+
if(!error){
62+
resolve({username: "Prashant", email: "email2prashantkr@gmail.com"})
63+
}
64+
else {
65+
reject('ERROR: Something went wrong')
66+
}
67+
}, 4000)
68+
})
69+
70+
// consuming promise
71+
p.then((user) => {
72+
console.log(user);
73+
return user.username
74+
}).then((username) => {
75+
console.log(username);
76+
}).catch((error) => {
77+
console.log(error);
78+
}).finally(() => {
79+
console.log("The promise is either resolved or rejected");
5580
})
5681

5782

@@ -79,4 +104,121 @@ <h1> Hello...... </h1>
79104
})
80105

81106

107+
108+
109+
// Lets see how Promises helps us to get rid of callback hell
110+
111+
function getCheese(){
112+
return new Promise((resolve,reject) => {
113+
setTimeout(() => {
114+
const cheese = "🧀"
115+
resolve(cheese)
116+
}, 6000)
117+
})
118+
}
119+
120+
function makeDough(cheese){
121+
return new Promise((resolve, reject) => {
122+
setTimeout(() => {
123+
const dough = cheese + "🫓"
124+
resolve(dough)
125+
}, 2000)
126+
})
127+
}
128+
129+
130+
function bakePizza(dough){
131+
return new Promise((resolve, reject) => {
132+
setTimeout(() => {
133+
const pizza = dough + "🍕"
134+
resolve(pizza)
135+
}, 2000)
136+
})
137+
}
138+
139+
// ----------CONSUMING PROMISE BY USING THEN(), CATCH(), FINALLY()---------
140+
141+
// getCheese()
142+
// .then((cheese) => {
143+
// console.log("Here is the cheese", cheese);
144+
// return makeDough(cheese)
145+
// })
146+
// .then((dough) => {
147+
// console.log("Here is the dough", dough);
148+
// return bakePizza()
149+
// })
150+
// .then((pizza) => {
151+
// console.log("Pizza is ready");
152+
// })
153+
// .catch((data) =>{
154+
// console.log("error occured", data);
155+
// })
156+
// .finally(() => {
157+
// console.log("Process ended");
158+
// })
159+
160+
161+
// Here, no nesting is taking place. All then, catch and finally are at the same level, which eliminates callback hell
162+
163+
164+
165+
// ----------CONSUMING PROMISE BY USING ASYNC AWAIT---------
166+
167+
/*
168+
async await:
169+
- They are built on top of JavaScript Promises, providing a syntax that looks synchronous but handles asynchronous operations.
170+
- They are used to work with asynchronous code in a more readable and manageable way.
171+
- Always returns a promise
172+
- async and await are used to handle promises.
173+
- await can only be used inside the async function.
174+
*/
175+
176+
async function orderPizza() { // async keyword is used with functions
177+
try{ // try and catch is being using to catch the error
178+
179+
// await keyword here will pause the execution of its surrounding async function until the promise is settled.
180+
const cheese = await getCheese() //JS Engine will wait for getCheese(), then will go to next line.
181+
console.log("here is the cheese", cheese);
182+
const dough = await makeDough(cheese)
183+
console.log("here is the dough", dough);
184+
const pizza = await bakePizza(dough)
185+
console.log("Here is the Pizza...!", pizza);
186+
}
187+
catch(err){
188+
console.log("Error occured", err);
189+
}
190+
finally {
191+
console.log("Process ended");
192+
}
193+
}
194+
195+
orderPizza()
196+
197+
// This async await will take a function call to execute
198+
// If we want to execute the function one time without even calling
199+
// we can use IIFE function like given below:1
200+
201+
/*
202+
(async function () {
203+
try{
204+
const cheese = await getCheese()
205+
console.log("here is the cheese", cheese);
206+
const dough = await makeDough(cheese)
207+
console.log("here is the dough", dough);
208+
const pizza = await bakePizza(dough)
209+
console.log("Here is the Pizza...!", pizza);
210+
}
211+
catch(err){
212+
console.log("Error occured", err);
213+
}
214+
finally {
215+
console.log("Process ended");
216+
}
217+
}) ();
218+
219+
*/
220+
221+
222+
223+
82224
</script>

0 commit comments

Comments
 (0)