Skip to content

Commit 6246224

Browse files
Galaxy-RangerGalaxy-Ranger
committed
promises and async/await finished next up error handlingexit
1 parent 7231cd6 commit 6246224

8 files changed

Lines changed: 225 additions & 0 deletions

‎09_Callbacks_promises_&_async-await/HTML/05_Promise_Chaining.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Promise Chaining</title>
7+
</head>
8+
<body>
9+
<h1>Promise Chaining</h1>
10+
<script src="../JS/05_promise_chaining.js"></script>
11+
</body>
12+
</html>

‎09_Callbacks_promises_&_async-await/HTML/06_Attaching_Multiple_Handlers.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Attaching Multiple Handlers to a Promise</title>
7+
</head>
8+
<body>
9+
<h1>Attaching Multiple Handlers to a Promise</h1>
10+
<script src="../JS/06_Attaching_Multiple_Handlers.js"></script>
11+
</body>
12+
</html>

‎09_Callbacks_promises_&_async-await/HTML/07_Promise_API.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Promise API</title>
7+
</head>
8+
<body>
9+
<h1>Promise API</h1>
10+
<script src="../JS/07_Promise_API.js"></script>
11+
</body>
12+
</html>

‎09_Callbacks_promises_&_async-await/HTML/08_Async_Await.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Async/Await in Javascript</title>
7+
</head>
8+
<body>
9+
<h1>Async/Await in Javascript</h1>
10+
<script src="../JS/08_Async_Await.js"></script>
11+
</body>
12+
</html>

‎09_Callbacks_promises_&_async-await/JS/05_Promise_Chaining.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
// p1 = new Promise((resolve, reject) => {
2+
// setTimeout(() => {
3+
// console.log('Promise 1 resolved');
4+
// resolve();
5+
// }, 2000);
6+
// })
7+
8+
// p2 = p1.then(() => {
9+
// console.log('Promise 1 then block run.');
10+
// return new Promise((resolve, reject) => {
11+
// setTimeout(() => {
12+
// console.log('Nested Promise 2 resolved');
13+
// resolve();
14+
// }, 2000);
15+
// })
16+
// })
17+
18+
// p2.then(() => {
19+
// console.log('Nested Promise 2 then block run.');
20+
// })
21+
22+
//* this is one way to write the promise chain together
23+
24+
// p1.then(() => {
25+
// console.log('Promise 1 then block run.');
26+
// return new Promise((resolve, reject) => {
27+
// setTimeout(() => {
28+
// console.log('Nested Promise 2 resolved');
29+
// resolve();
30+
// }, 2000);
31+
// })
32+
// }).then(() => {
33+
// console.log('Nested Promise 2 then block run.');
34+
// })
35+
36+
//* another way to write the promise chain together
37+
38+
//! Quick Quiz Write the loadscript function we wrote in the beginning of this chapter using promises.
39+
40+
41+
function loadScript(src) {
42+
return new Promise((resolve, reject) => {
43+
let script = document.createElement('script');
44+
script.src = src;
45+
document.body.appendChild(script)
46+
script.onload = () => {
47+
resolve(src)
48+
}
49+
script.onerror = () => {
50+
reject(new Error(`Script load error for ${src}`))
51+
}
52+
})
53+
}
54+
55+
loadScript('https://cdnxyzjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js').then((value) => {
56+
console.log(`Script ${value} loaded successfully`);
57+
}).catch((error) => {
58+
console.log(error);
59+
})

‎09_Callbacks_promises_&_async-await/JS/06_Attaching_Multiple_Handlers.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
p1 = new Promise((resolve, result) => {
2+
resolve();
3+
})
4+
5+
p1.then(() => {
6+
setTimeout(() => {
7+
console.log("Hello")
8+
}, 2000);
9+
})
10+
11+
p1.then((result) => {
12+
setTimeout(() => {
13+
console.log("Surya")
14+
}, 4000);
15+
})
16+
17+
p1.then((result) => {
18+
setTimeout(() => {
19+
console.log("Pratap")
20+
}, 6000);
21+
})
22+
23+
p1.then((result) => {
24+
setTimeout(() => {
25+
console.log("Singh")
26+
}, 8000);
27+
})

‎09_Callbacks_promises_&_async-await/JS/07_Promise_API.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
let p1 = new Promise((resolve, reject) => {
2+
setTimeout(() => {
3+
resolve('Promise 1 resolved')
4+
}, 2000)
5+
})
6+
7+
let p2 = new Promise((resolve, reject) => {
8+
setTimeout(() => {
9+
resolve('Promise 2 resolved')
10+
}, 4000)
11+
})
12+
13+
let p3 = new Promise((resolve, reject) => {
14+
setTimeout(() => {
15+
// resolve('Promise 2 resolved')
16+
reject('Promise 3 rejected')
17+
}, 6000)
18+
})
19+
20+
//? Method 1: Promise.all([promises]) ---> // if we run Promise.all and if in case any one promise is rejected then Promise.all will not ran.
21+
Promise.all([p1, p2, p3]).then((values) => {
22+
console.log(values) // value
23+
})
24+
25+
//? Method 2: Promise.allSettled([promises]) ---> doesn't matter if any one promise is rejected it will give the result of the resolved promises.
26+
Promise.allSettled([p1, p2, p3]).then((values) => {
27+
console.log(values) // status, value
28+
})
29+
30+
//? Method 3: Promise.race([promises]) ---> it will return the result of the promise that resolves or rejects first.
31+
Promise.race([p1, p2, p3]).then((value) => {
32+
console.log(value) // value
33+
})
34+
35+
//? Method 4: Promise.any([promises]) ---> it will return the result of the first promise that resolves.
36+
Promise.any([p1, p2, p3]).then((value) => {
37+
console.log(value) // value
38+
})
39+
40+
//? Method 5: Promise.try(fn) ---> it will run the function passed as argument and if it throws an error, it will be caught and returned as a rejected promise.
41+
Promise.try(() => {
42+
throw new Error('This is an error')
43+
}).then((value) => {
44+
console.log(value) // Error: This is an error
45+
}).catch((error) => {
46+
console.log(error) // Error: This is an error
47+
})

‎09_Callbacks_promises_&_async-await/JS/08_Async_Await.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
//* haam kisi bhi function ko async kar sakte hai aur
2+
//* uske baad uske andar promise ko await kar sakte hai
3+
4+
//? An async function always returns a promise
5+
async function myFunction() {
6+
//? We can use await keyword inside an async function to wait for the promise to resolve
7+
//? Promises are resolved asynchronously, so this line of code will continue executing while the promise is pending
8+
const result = "Hello, Surya This is my promise"
9+
return result
10+
}
11+
myFunction().then((result) => {
12+
console.log('Data from the first API call:',result)
13+
})
14+
15+
async function weatherData() {
16+
let delhiWeather = new Promise((resolve, reject) => {
17+
//? Simulating a delay of 5 seconds
18+
setTimeout(() => {
19+
//? If the API call is successful, resolve the promise with the weather data
20+
resolve({ city: 'Delhi', temperature: 30 })
21+
}, 5000)
22+
})
23+
let bangaloreWeather = new Promise((resolve, reject) => {
24+
//? Simulating a delay of 10 seconds
25+
setTimeout(() => {
26+
//? If the API call is successful, resolve the promise with the weather data
27+
resolve({ city: 'Bangalore', temperature: 21 })
28+
}, 10000)
29+
})
30+
console.log("Fetching delhi weather data please wait...") // yeh shirf isliye log kiya jaa raha hai ki actual me await pause leta hai kya ek kaam ko finish karke dusre kaam ko start karne me.
31+
let delhiWeatherData = await delhiWeather
32+
console.log("Delhi weather data fetched")
33+
console.log("Fetching bangalore weather data please wait...")
34+
let bangaloreWeatherData = await bangaloreWeather
35+
console.log("Bangalore weather data fetched")
36+
return [delhiWeatherData, bangaloreWeatherData]
37+
}
38+
39+
weatherData().then((weatherData) => {
40+
console.log('Weather data for Delhi:', weatherData[0])
41+
console.log('Weather data for Bangalore:', weatherData[1])
42+
})
43+
44+
//* Two async functions runs in parallel

0 commit comments

Comments
 (0)