Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Commit 6c1f164

Browse files
Promises Updated
1 parent 442b8d4 commit 6c1f164

File tree

2 files changed

+49
-5
lines changed

2 files changed

+49
-5
lines changed

‎12_Asynchronous_Concepts/12.md‎

Lines changed: 39 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
// clearInterval
88

99
// outputs Hello, world! Every 2 seconds
10-
const myInterval = setInterval(() => console.log("Hello, world!"), 2000);
11-
clearInterval(myInterval); // Clears the Interval
10+
const myInterval = setInterval(() => console.log("Hello, world!"), 2000);
11+
clearInterval(myInterval); // Clears the Interval
1212

1313
// setTimeout
1414
// clearTimeout
@@ -34,7 +34,6 @@ const functionOne = () => {
3434
const functionTwo = () => {
3535
console.log("Function two"); // 2
3636
};
37-
3837
```
3938

4039
#### Callback functions
@@ -55,14 +54,50 @@ fetchUser("Shubham", (user) => {
5554

5655
#### Promises
5756

58-
```js
5957
//In JavaScript, a Promise is an object that represents the result of an asynchronous //operation. A Promise can be in one of three states: pending, fulfilled, or rejected.
6058

6159
//A Promise starts in the pending state, and it can either be fulfilled with a value or //rejected with a reason (error). Once a Promise is fulfilled or rejected, it is considered //settled, and it cannot be changed anymore.
6260

6361
//Promises are used to handle asynchronous operations in a synchronous manner, making it //easier to write and reason about async code. Instead of using callback functions, you can //use the then and catch methods on a Promise to specify what should happen when the Promise //is fulfilled or rejected.
6462

63+
```js{
64+
// Let's say we have a shopping cart
65+
const cart = ['shoes','pants','shirt'];
66+
67+
// If we had to implement a series of operations
68+
// let's say we have a function to,
69+
// 1. Create an order which will return a orderID
70+
// 2. Proceed to payment with orderId and return payment info.
71+
// 3. Show order summary with payment info
72+
73+
createOrder(cart,(orderID)=>{
74+
proceedToPayment(orderID,(paymentInfo)=>{
75+
showOrderSummary(paymentInfo,()=>{
76+
displayOrderSummary();
77+
})
78+
}
79+
})
80+
// In the above code we see the call back hell or
81+
// also known as Pyramid of doom
82+
83+
// We can write the same code using promises
84+
createOrder(cart)
85+
.then((orderId)=>{
86+
return proceedToPayment(orderId)
87+
})
88+
.then((paymentInfo)=>{
89+
return showOrderSummary(paymentInfo)
90+
})
91+
.then(()=>{
92+
displayOrderSummary();// not returning anything because we are just displaying
93+
})
94+
95+
// why do we use promises ?
96+
// 1. To avoid Inversion of Control [Not calling the fuction over another function]
97+
// 2. To avoid Call Back hell and have better control of our code
98+
```
6599

100+
```js
66101
const fetchUser = (username) => {
67102
return new Promise((resolve, reject) => {
68103
setTimeout(() => {
@@ -96,4 +131,3 @@ fetchUser("Shubham")
96131
.then((photos) => fetchPhotoDetails(photos[0]))
97132
.then((details) => console.log(`Your photo details are ${details}`));
98133
```
99-

‎12_Asynchronous_Concepts/script.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,13 @@ const functionTwo = () => {
3737
};
3838

3939
functionOne();
40+
41+
// callbacks;
42+
43+
const cart = ["Shoes", "Shirt", "Pant"];
44+
45+
const Promise = createOrder(cart);
46+
47+
Promise.then((orderId) => {
48+
processPayment(orderId);
49+
});

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /