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 d5d1f58

Browse files
Promises Updated
2 parents 6c1f164 + 6711048 commit d5d1f58

File tree

2 files changed

+46
-39
lines changed

2 files changed

+46
-39
lines changed

‎12_Asynchronous_Concepts/12.md‎

Lines changed: 34 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,15 @@ console.log("logging in the bottom");
2424
```js
2525
// Synchronous Code
2626
const functionOne = () => {
27-
console.log("Function One"); // 1
27+
console.log("Function One"); // 1
2828

29-
functionTwo();
29+
functionTwo();
3030

31-
console.log("Function One, Part two"); // 3
31+
console.log("Function One, Part two"); // 3
3232
};
3333

3434
const functionTwo = () => {
35-
console.log("Function two"); // 2
35+
console.log("Function two"); // 2
3636
};
3737
```
3838

@@ -42,16 +42,21 @@ const functionTwo = () => {
4242
// Callback functions
4343

4444
const fetchUser = (username, callback) => {
45-
setTimeout(() => {
46-
callback({ username });
47-
}, 2000);
45+
setTimeout(() => {
46+
callback({ username });
47+
}, 2000);
4848
};
4949

5050
fetchUser("Shubham", (user) => {
51-
console.log(`Hello, ${user.username}`); // Hello, Shubham
51+
console.log(`Hello, ${user.username}`); // Hello, Shubham
5252
});
5353
```
5454

55+
The two problems that we faced in callbacks are:-
56+
57+
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+
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+
5560
#### Promises
5661

5762
//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.
@@ -99,35 +104,35 @@ createOrder(cart)
99104

100105
```js
101106
const fetchUser = (username) => {
102-
return new Promise((resolve, reject) => {
103-
setTimeout(() => {
104-
console.log("[Now we have the user]");
107+
return new Promise((resolve, reject) => {
108+
setTimeout(() => {
109+
console.log("[Now we have the user]");
105110

106-
resolve({ username });
107-
}, 2000);
108-
});
111+
resolve({ username });
112+
}, 2000);
113+
});
109114
};
110115

111116
const fetchUserPhotos = (username) => {
112-
return new Promise((resolve, reject) => {
113-
setTimeout(() => {
114-
console.log(`Now we have the photos for ${username}`);
115-
resolve(["Photo1", "Photo2"]);
116-
}, 2000);
117-
});
117+
return new Promise((resolve, reject) => {
118+
setTimeout(() => {
119+
console.log(`Now we have the photos for ${username}`);
120+
resolve(["Photo1", "Photo2"]);
121+
}, 2000);
122+
});
118123
};
119124

120125
const fetchPhotoDetails = (photo) => {
121-
return new Promise((resolve, reject) => {
122-
setTimeout(() => {
123-
console.log(`[Now we have the photo details ${photo}]`);
124-
resolve("details...");
125-
}, 2000);
126-
});
126+
return new Promise((resolve, reject) => {
127+
setTimeout(() => {
128+
console.log(`[Now we have the photo details ${photo}]`);
129+
resolve("details...");
130+
}, 2000);
131+
});
127132
};
128133

129134
fetchUser("Shubham")
130-
.then((user) => fetchUserPhotos(user.username))
131-
.then((photos) => fetchPhotoDetails(photos[0]))
132-
.then((details) => console.log(`Your photo details are ${details}`));
135+
.then((user) => fetchUserPhotos(user.username))
136+
.then((photos) => fetchPhotoDetails(photos[0]))
137+
.then((details) => console.log(`Your photo details are ${details}`));
133138
```

‎README.md‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,15 @@
44

55
## Contents -
66

7-
- #### [Variables and Data Types](/1_variables_and_data_types/variablesDataTypes.md)
8-
- #### [Operators](/2_Operators/Operators.md)
9-
- #### [Logic and Control Flow](/3_Logic_and_Control_flow/LogicAndControlFlow.md)
10-
- #### [Functions](/4_Functions/Functions.md)
11-
- #### [Hoisting and Closures](/5_Hoisting_and_Closure/HoistingAndClosure.md)
12-
- #### [Strings in Detail](/6_Strings_in_detail/strings.md)
13-
- #### [Arrays in Detail](/7_Arrays_in_detail/Arrays.md)
14-
- #### [Objects in Detail](/8_Objects_in_detail/objects.md)
15-
- #### [Value vs Reference](/9_Value_vs_Reference/value_vs_reference.md)
16-
- #### [DOM](/10_DOM/dom.md)
7+
- #### [Variables and Data Types](/1_variables_and_data_types/variablesDataTypes.md)
8+
- #### [Operators](/2_Operators/Operators.md)
9+
- #### [Logic and Control Flow](/3_Logic_and_Control_flow/LogicAndControlFlow.md)
10+
- #### [Functions](/4_Functions/Functions.md)
11+
- #### [Hoisting and Closures](/5_Hoisting_and_Closure/HoistingAndClosure.md)
12+
- #### [Strings in Detail](/6_Strings_in_detail/strings.md)
13+
- #### [Arrays in Detail](/7_Arrays_in_detail/Arrays.md)
14+
- #### [Objects in Detail](/8_Objects_in_detail/objects.md)
15+
- #### [Value vs Reference](/9_Value_vs_Reference/value_vs_reference.md)
16+
- #### [DOM](/10_DOM/dom.md)
17+
- #### [Classes, this and new keyword](/11_Classes_this_and_new_keyword/11.md)
18+
- #### [Asynchronous Concepts](/12_Asynchronous_Concepts/12.md)

0 commit comments

Comments
(0)

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