You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
There are two problems that we face in callbacks:-
56
70
57
71
1. Callback Hell: Asynchronous operations in JavaScript can be achieved through callbacks. Whenever there are multiple dependent Asynchronous operations it will result in a lot of nested callbacks. This will cause a 'pyramid of doom' like structure.
58
72
2. Inversion of control: When we give the control of callbacks being called to some other API, this may create a lot of issues. That API may be buggy, may not call our callback and create order as in the above example, may call the payment callback twice etc.
59
73
60
74
#### Promises
61
75
62
-
//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.
76
+
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.
63
77
64
-
//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.
78
+
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.
65
79
66
-
//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.
80
+
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.
67
81
68
-
```js{
82
+
```js
69
83
// Let's say we have a shopping cart
70
84
constcart= ['shoes','pants','shirt'];
71
85
@@ -101,38 +115,3 @@ createOrder(cart)
101
115
// 1. To avoid Inversion of Control [Not calling the fuction over another function]
102
116
// 2. To avoid Call Back hell and have better control of our code
103
117
```
104
-
105
-
```js
106
-
constfetchUser= (username) => {
107
-
returnnewPromise((resolve, reject) => {
108
-
setTimeout(() => {
109
-
console.log("[Now we have the user]");
110
-
111
-
resolve({ username });
112
-
}, 2000);
113
-
});
114
-
};
115
-
116
-
constfetchUserPhotos= (username) => {
117
-
returnnewPromise((resolve, reject) => {
118
-
setTimeout(() => {
119
-
console.log(`Now we have the photos for ${username}`);
120
-
resolve(["Photo1", "Photo2"]);
121
-
}, 2000);
122
-
});
123
-
};
124
-
125
-
constfetchPhotoDetails= (photo) => {
126
-
returnnewPromise((resolve, reject) => {
127
-
setTimeout(() => {
128
-
console.log(`[Now we have the photo details ${photo}]`);
129
-
resolve("details...");
130
-
}, 2000);
131
-
});
132
-
};
133
-
134
-
fetchUser("Shubham")
135
-
.then((user) =>fetchUserPhotos(user.username))
136
-
.then((photos) =>fetchPhotoDetails(photos[0]))
137
-
.then((details) =>console.log(`Your photo details are ${details}`));
0 commit comments