Skip to content

Commit 3cb43d2

Browse files
coderzamancoderzaman
committed
Asynchronous JavaScript-P02
1 parent 3577266 commit 3cb43d2

File tree

1 file changed

+247
-84
lines changed

1 file changed

+247
-84
lines changed

‎17. Asynchronous JavaScript/js/script.js

Lines changed: 247 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
// Synchronous Program Example
2+
// Warnng: Comment other example when run one
3+
// Exaample:
4+
const porcessOrder = (customer) =>{
5+
console.log(`Procesing order cutomer ones`);
26

3-
// const porcessOrder = (customer) =>{
4-
// console.log(`Procesing order cutomer ones`);
5-
6-
// var currentTime = new Date().getTime();
7-
// while(currentTime+3000 >= new Date().getTime());
8-
9-
// console.log(`Order Processed For Customer 1`);
10-
// }
7+
var currentTime = new Date().getTime();
8+
while(currentTime+3000 >= new Date().getTime());
119

12-
// console.log(`Take Order For Customer 1`);
13-
// porcessOrder();
14-
// console.log(`Order complete For Customer 1`);
10+
console.log(`Order Processed For Customer 1`);
11+
}
12+
13+
console.log(`Take Order For Customer 1`);
14+
porcessOrder();
15+
console.log(`Order complete For Customer 1`);
1516

1617
// When javascript code run in the browser firstly convert it to machine Language then browser can recognize it
1718

@@ -39,19 +40,21 @@
3940
// For Solving Blocking Behaivor we can use setTimeout function
4041

4142
//Asynchronous Programming
42-
// const porcessOrder = (customer) =>{
43-
// console.log(`Procesing order cutomer ones`);
44-
45-
// setTimeout(()=> console.log('Orderd Completed'),3000);
46-
47-
// console.log(`Order Process For Customer 1`);
48-
// }
4943

50-
// console.log(`Take Order For Customer 1`);
51-
// porcessOrder();
52-
// console.log(`Complete Order for Customer 1`);
44+
// Exaample:
45+
const porcessOrder = (customer) =>{
46+
console.log(`Procesing order cutomer ones`);
47+
48+
setTimeout(()=> console.log('Orderd Completed'),3000);
49+
50+
console.log(`Order Process For Customer 1`);
51+
}
52+
53+
console.log(`Take Order For Customer 1`);
54+
porcessOrder();
55+
console.log(`Complete Order for Customer 1`);
56+
5357

54-
5558
//Previous Example
5659
// When javascript engine see a build in asynchronous function setTimeout() in call stack it instantly pass it call stack to WEB APIs and other program run continously
5760

@@ -67,59 +70,61 @@
6770

6871
// Call Back function
6972

70-
// const takeOrder = (customer, callback) =>{
71-
// console.log(`Take Order For ${customer}`);
72-
// callback(customer);
73-
// }
73+
// Exaample:
74+
const takeOrder = (customer, callback) =>{
75+
console.log(`Take Order For ${customer}`);
76+
callback(customer);
77+
}
7478

75-
// const porcessOrder = (customer, callback) =>{
76-
// console.log(`Procesing order ${customer}`);
77-
78-
// setTimeout(()=> {
79-
// console.log('Orderd Completed');
80-
// callback(customer);
81-
// },3000);
82-
83-
// console.log(`Order Processed For ${customer}`);
84-
// }
79+
const porcessOrder = (customer, callback) =>{
80+
console.log(`Procesing order ${customer}`);
8581

86-
// const completeOrder = (customer) =>{
87-
// console.log(`Complete Order For ${customer}`);
88-
// }
82+
setTimeout(()=> {
83+
console.log('Orderd Completed');
84+
callback(customer);
85+
},3000);
8986

87+
console.log(`Order Processed For ${customer}`);
88+
}
9089

91-
// takeOrder('Abdur Rahman', (customer)=>{
92-
// porcessOrder(customer, (customer)=>{
93-
// completeOrder(customer);
94-
// })
95-
// } )
90+
const completeOrder = (customer) =>{
91+
console.log(`Complete Order For ${customer}`);
92+
}
9693

97-
// const takeOrder = (customer) =>{
98-
// console.log(`Take Order For ${customer}`);
99-
// porcessOrder(customer);
100-
// }
10194

102-
// const porcessOrder = (customer) =>{
103-
// console.log(`Procesing order ${customer}`);
104-
105-
// setTimeout(()=> {
106-
// console.log('Orderd Completed');
107-
// completeOrder(customer);
108-
// },3000);
109-
110-
// console.log(`Order Processed For ${customer}`);
111-
// }
95+
takeOrder('Abdur Rahman', (customer)=>{
96+
porcessOrder(customer, (customer)=>{
97+
completeOrder(customer);
98+
})
99+
} )
112100

113-
// const completeOrder = (customer) =>{
114-
// console.log(`Complete Order For ${customer}`);
115-
// }
101+
// Exaample:
102+
const takeOrder = (customer) =>{
103+
console.log(`Take Order For ${customer}`);
104+
porcessOrder(customer);
105+
}
116106

107+
const porcessOrder = (customer) =>{
108+
console.log(`Procesing order ${customer}`);
109+
110+
setTimeout(()=> {
111+
console.log('Orderd Completed');
112+
completeOrder(customer);
113+
},3000);
114+
115+
console.log(`Order Processed For ${customer}`);
116+
}
117+
118+
const completeOrder = (customer) =>{
119+
console.log(`Complete Order For ${customer}`);
120+
}
117121

118-
// takeOrder('Abdur Rahman');
119122

120-
// // console.log("Hello");
123+
takeOrder('Abdur Rahman');
121124

125+
console.log("Hello");
122126

127+
//Test
123128
// let processOrder = (customer, callback) =>{
124129
// console.log(`Processing Order for ${customer}`);
125130
// setTimeout(()=>{
@@ -133,29 +138,187 @@
133138
// console.log(`Complete Order for ${customer}`);
134139
// }
135140

136-
const takeOrder = (customer, callback) =>{
137-
console.log(`Take Order for ${customer}`);
138-
callback(customer);
139-
}
141+
// const takeOrder = (customer, callback) => {
142+
// console.log(`Take Order for ${customer}`);
143+
// callback(customer);
144+
// }
140145

141-
const processOrder = (customer, callback)=>{
142-
console.log(`Processing Order for ${customer}`);
143-
setTimeout(function(){
144-
console.log(`Cook Completed for ${customer}`);
145-
console.log(`Order Prossed for ${customer}`);
146-
callback(customer);
147-
},3000);
148-
149-
}
146+
// const processOrder = (customer, callback) => {
147+
// console.log(`Processing Order for ${customer}`);
148+
// setTimeout(function () {
149+
// console.log(`Cook Completed for ${customer}`);
150+
// console.log(`Order Prossed for ${customer}`);
151+
// callback(customer);
152+
// }, 3000);
150153

151-
let completeOrder = (customer) => {
152-
console.log(`Complete Order for ${customer}`);
153-
};
154+
// }
154155

155-
takeOrder("Abdur Rahman" , (customer)=>{
156-
processOrder(customer, (customer)=>{
157-
completeOrder(customer);
158-
});
159-
});
156+
// let completeOrder = (customer) => {
157+
// console.log(`Complete Order for ${customer}`);
158+
// };
159+
160+
// takeOrder("Abdur Rahman", (customer) => {
161+
// processOrder(customer, (customer) => {
162+
// completeOrder(customer);
163+
// });
164+
// });
160165
//We doing previous program asynchronous way
161166
// If there is more task on the program it goint to many nested block. Whcih call callback hell. For solve the problem we can promise
167+
168+
169+
// Promises: Promises is JavaScript like real life promise. Sometime we fullfillment our pormise sometimes fail to fullfilllment promise.
170+
171+
// In JavaScript we keep our promise which call resolve and can not keep call rejected.
172+
173+
// Promise use solve for asynchronous problem. We can also use promise for pause code block for few times
174+
175+
// Promise run asynchronously
176+
// Create Promise with using Promise object
177+
// Promise object takes a anno anonymous function. Anonymous function take to make name resolve and reject
178+
// If promise is sucess resolve function call if not reject function are called
179+
// Exaample:
180+
const hassMeeting = false;
181+
182+
const meeting = new Promise((resolve, reject) => {
183+
if (!hassMeeting) {
184+
const meetingDetails = {
185+
name: "Technical Meetings",
186+
location: "Google Meet",
187+
time: "08:00 AM"
188+
}
189+
resolve(meetingDetails);
190+
}else{
191+
reject(new Error("Meeting Already Sheduled"));
192+
}
193+
194+
});
195+
// If javascript sees promise instantly skip this promise and go to the next code. After promise fulfillment the promise block is run
196+
meeting
197+
.then((res) => {
198+
console.log(JSON.stringify(res));
199+
})
200+
.catch((err)=>{
201+
console.log(err.message);
202+
})
203+
204+
205+
// Multiple Promise Block
206+
// Exaample:
207+
let hassMeeting = false;
208+
const meeting = new Promise((resolve, reject) => {
209+
if (!hassMeeting) {
210+
const meetingDetails = {
211+
name: "Technical Meetings",
212+
location: "Google Meet",
213+
time: "08:00 AM"
214+
}
215+
resolve(meetingDetails);
216+
}else{
217+
reject(new Error("Meeting Already Sheduled"));
218+
}
219+
220+
});
221+
222+
223+
const addToCalendar = (meetingDetails)=>{
224+
let calendar = `${meetingDetails.name} has been scheduled on ${meetingDetails.location} at ${meetingDetails.time}`;
225+
226+
return Promise.resolve(calendar);
227+
}
228+
229+
meeting
230+
.then(addToCalendar)
231+
.then((res) => {
232+
console.log(res);
233+
})
234+
.catch((err)=>{
235+
console.log(err.message);
236+
})
237+
238+
239+
// Promise Exceution order
240+
// Exaample:
241+
const promise1 = new Promise((resolve, reject) => {
242+
setTimeout(() => {
243+
resolve("Promise1 Completed");
244+
}, 3000)
245+
});
246+
247+
const promise2 = new Promise((resolve, reject) => {
248+
resolve("Promise2 Completed");
249+
});
250+
251+
promise1
252+
.then((res)=>{console.log(res)});
253+
254+
promise2
255+
.then((res)=>{console.log(res)});
256+
257+
258+
// If want to all promise in the smae time
259+
260+
Promise.all([promise1, promise2]).then((res)=>{console.log(res)});
261+
262+
263+
// If want to execute faster one promise from multiple then we used
264+
// Promise.race(arr)
265+
266+
Promise.race([promise1,promise2]).then((res)=>{
267+
console.log(res);
268+
})
269+
270+
// Using a lot of .then() for handling asynchronous code (like with promises) can become cumbersome and difficult to read or maintain in large projects. The async-await pattern was introduced to make asynchronous code easier to write and understand. It allows you to write asynchronous code in a more "synchronous" style, making it easier to read and maintain.
271+
// async: Declares an asynchronous function that automatically returns a promise. This allows you to use await inside the function.
272+
273+
// await: Pauses the execution of the function until the promise is resolved. This allows you to write asynchronous code in a more synchronous way.
274+
275+
// try-catch: Used to handle errors, similar to .catch() in the .then() chain.
276+
// Exaample:
277+
let hassMeeting = false;
278+
const meeting = new Promise((resolve, reject) => {
279+
if (!hassMeeting) {
280+
const meetingDetails = {
281+
name: "Technical Meetings",
282+
location: "Google Meet",
283+
time: "08:00 AM"
284+
}
285+
resolve(meetingDetails);
286+
} else {
287+
reject(new Error("Meeting Already Sheduled"));
288+
}
289+
290+
});
291+
292+
293+
const addToCalendar = (meetingDetails) => {
294+
let calendar = `${meetingDetails.name} has been scheduled on ${meetingDetails.location} at ${meetingDetails.time}`;
295+
296+
return Promise.resolve(calendar);
297+
}
298+
299+
// we skip this code
300+
301+
// meeting
302+
// .then(addToCalendar)
303+
// .then((res) => {
304+
// console.log(res);
305+
// })
306+
// .catch((err)=>{
307+
// console.log(err.message);
308+
// })
309+
310+
// Write synchronous code in asynchronous way
311+
312+
async function myMeeting() {
313+
//Awate function wait until excution of meeting()
314+
try {
315+
const meetingDetails = await meeting;
316+
const calendar = addToCalendar(meetingDetails);
317+
console.log(calendar);
318+
}catch (err) {
319+
console.log(err.message);
320+
}
321+
322+
}
323+
324+
myMeeting();

0 commit comments

Comments
 (0)