diff --git a/Asynchronous JavaScript/async.js b/Asynchronous JavaScript/async.js new file mode 100644 index 00000000..ac18652f --- /dev/null +++ b/Asynchronous JavaScript/async.js @@ -0,0 +1,28 @@ +//====================> Synchronous code <=========== + +const f1 = () => { + console.log('f1 is executing'); + f2(); + console.log('f1 part 2 is executing'); +}; +const f2 = () => { + console.log('f2 is executing'); +}; + +f1(); + +//====================> Asynchronous code <=========== + +const f3 = () => { + console.log('f3 is executing'); + f4(); + console.log('f3 part 3 is executing'); +}; + +const f4 = () => { + setTimeout(() => { + console.log('f3 part 2 is executing'); + }, 2000); +}; + +f3(); diff --git a/Asynchronous JavaScript/callbacks.js b/Asynchronous JavaScript/callbacks.js new file mode 100644 index 00000000..2547375a --- /dev/null +++ b/Asynchronous JavaScript/callbacks.js @@ -0,0 +1,59 @@ +//===============================> Callback Function <================ + +//function 1 +const fetchUser = (username, callback) => { + console.log('Fetching ...'); + + setTimeout(() => { + console.log('Now we Have the user'); + callback(username); + }, 2000); +}; +//function 2 +const fetUserPhotos = (username, callback) => { + console.log('Now fetching photos...'); + setTimeout(() => { + console.log(`Now we have photos of ${username}`); + callback(['ph1', 'ph2', 'ph3']); + }, 2000); +}; + +//function 3 +const fetPhotoDetails = (photo, callback) => { + console.log('Fetching photo details...'); + setTimeout(() => { + console.log(`Now we have details of ${photo}`); + callback({ title: 'Photo title' }); + }, 2000); +}; + +//==================> this is Callback Hell <========================= +fetchUser('Mirinda', (user) => { + //resolves 1st callback + console.log(`hello ${user} here`); + //second callback + fetUserPhotos(user.username, (photos) => { + console.log(`These are photos of ${user.username}:`, photos); + //third callback + fetPhotoDetails(photos[0], (details) => { + console.log(`Details of ${photos[0]}:`, details); + }); + }); +}); + +//============> Promise < ================= + +// const fetchUser = new Promise((resolve, reject) => { +// console.log('wait Fetching !!!'); +// setTimeout(() => { +// resolve({ username: 'Michen' }); //means Succesfully Data Resolved +// // reject('Failed to fetch user'); //means Failed to Resolve Data +// }, 2000); +// }); +// fetchUser +// .then((user) => { +// console.log(user.username); +// }) +// .catch((err) => { +// console.log(err); +// }); diff --git a/Asynchronous JavaScript/promises.js b/Asynchronous JavaScript/promises.js new file mode 100644 index 00000000..73b7d2b6 --- /dev/null +++ b/Asynchronous JavaScript/promises.js @@ -0,0 +1,58 @@ +//===============================> Callback Function <================ + +//function 1 + +const fetchUser = (username) => { + return new Promise((resolve, reject) => { + setTimeout(() => { + resolve({ username: username }); //means Succesfully Data Resolved + // reject('Failed to fetch user'); //means Failed to Resolve Data + }, 2000); + }); +}; + +//function 2 +const fetUserPhotos = (username) => { + return new Promise((resolve, reject) => { + console.log('Now fetching photos...'); + setTimeout(() => { + console.log(`Now we have photos of ${username}`); + resolve(['ph1', 'ph2', 'ph3']); + }, 2000); + }); +}; + +//function 3 +const fetPhotoDetails = (photo) => { + return new Promise((resolve, reject) => { + console.log('Fetching photo details...'); + setTimeout(() => { + console.log(`Now we have details of ${photo}`); + resolve({ title: 'Photo title' }); + }, 2000); + }); +}; + +//==================> this is Callback Hell <========================= +// fetchUser('Mirinda', (user) => { +// //resolves 1st callback +// console.log(`hello ${user} here`); +// //second callback +// fetUserPhotos(user.username, (photos) => { +// console.log(`These are photos of ${user.username}:`, photos); +// //third callback +// fetPhotoDetails(photos[0], (details) => { +// console.log(`Details of ${photos[0]}:`, details); +// }); +// }); +// }); + +//============> Promise < ================= + +fetchUser('Mirinda').then((user) => { + fetUserPhotos(user.username).then((photos) => { + fetPhotoDetails(photos[0]).then((details) => { + console.log(`Details of ${photos[0]}:`, details); + }); + }); +}); diff --git a/Asynchronous JavaScript/script.js b/Asynchronous JavaScript/script.js new file mode 100644 index 00000000..5d60a867 --- /dev/null +++ b/Asynchronous JavaScript/script.js @@ -0,0 +1,17 @@ +//=================> Asynchronous JavaScript <===================== + +//===============> Intervals , after certaimn time Code is Executed <======== + +const myInterval = setInterval(() => { + console.log('Hi!'), 100; +}); +// clearInterval(myInterval); + +//==============> Set TimeOut <================== + +//waits for Some time then executes the specified function + +const timer = setTimeout(() => { + console.log('this is gonna Execute After 5 sec'); +}, 5000); +// clearTimeout(timer); diff --git a/Asynchronous JavaScript/syncAwait.js b/Asynchronous JavaScript/syncAwait.js new file mode 100644 index 00000000..43b33530 --- /dev/null +++ b/Asynchronous JavaScript/syncAwait.js @@ -0,0 +1,52 @@ +//======================> Async Await <==================== + +const fxn = async (number) => { + return number; +}; + +const numb = async () => { + const data = await fxn(5); + console.log(data); +}; + +numb(); // will print 5 as expected + +const fetchUser = (username) => { + return new Promise((resolve, reject) => { + setTimeout(() => { + resolve({ username: username }); //means Succesfully Data Resolved + // reject('Failed to fetch user'); //means Failed to Resolve Data + }, 2000); + }); +}; + +//function 2 +const fetUserPhotos = (username) => { + return new Promise((resolve, reject) => { + console.log('Now fetching photos...'); + setTimeout(() => { + console.log(`Now we have photos of ${username}`); + resolve(['ph1', 'ph2', 'ph3']); + }, 2000); + }); +}; + +//function 3 +const fetPhotoDetails = (photo) => { + return new Promise((resolve, reject) => { + console.log('Fetching photo details...'); + setTimeout(() => { + console.log(`Now we have details of ${photo}`); + resolve({ title: 'Photo title' }); + }, 2000); + }); +}; + +const display = async () => { + const user = await fetchUser('Mirinda'); + const photos = await fetUserPhotos(user.username); + const details = await fetPhotoDetails(photos[0]); + console.log(`Details of ${photos[0]}:`, details); +}; + +display();