-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathasynchronous.html
More file actions
325 lines (280 loc) · 14.4 KB
/
asynchronous.html
File metadata and controls
325 lines (280 loc) · 14.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web-Developer's Journey | Asynchronous</title>
<link rel="stylesheet" href="./style.css">
<link rel="icon" href="./assets/images/logo.png">
<style>
#asynchronous {
color: gray;
}
#sync, #async, #code1 {
width: auto;
height: auto;
}
</style>
</head>
<body>
<body>
<header>
<h1>Asynchronous JavaScript</h1>
<nav>
<a href="./index.html" id="home" target="_parent">Home</a>
<a href="./begginer.html" id="Beginner"> Beginner </a>
<a href="./Intermediate.html" id="intermediate"> Intermediate </a>
<a href="#" id="asynchronous"> Asynchronous </a>
</nav>
</header>
<hr>
<main>
<section>
<article>
<h2>What is Synchronous Code?</h2>
<p>
When we write a program in JavaScript, it executes line by line. When
a line is completely executed, then and then only does the code move
forward to execute the next line.Let's look at an example of this:
<pre>
<code>
let greet_one = "Hello" <br>
let greet_two = "World!!!" <br>
console.log(greet_one) <br>
for(let i=0;i<1000000000;i++){ <br>
} <br>
console.log(greet_two); <br>
</code>
</pre>
Now if you run the above example on your machine you will notice
that greet_one logs first. Then the program waits for a couple of
seconds and then logs greet_two. This is because the code executes
line by line. This is called synchronous code. This creates lot of
problems. For example, if a certain piece of code takes 10 seconds
to execute, the code after it won't be able to execute until it's
finished, causing delays.
</p>
</article>
<img src="./assets/images/sync.png" alt="synchronous JavaScript" id="sync">
</section>
<section>
<article>
<h2>What is Asynchronous Code?</h2>
<p>
With asynchronous code, multiple tasks can execute at the same time
while tasks in the background finish. This is what we call
non-blocking code. The execution of other code won't stop while
an asynchronous task finishes its work.
<br>
<br>
Let's see an example of asynchronous code:
<pre>
<code>
let greet_one = "Hello" <br>
let greet_two = "World!!!" <br>
console.log(greet_one) <br>
setTimeout(function(){ <br>
console.log("Asynchronous"); <br>
}, 10000) <br>
console.log(greet_two); <br>
</code>
</pre>
</p>
</article>
<img src="./assets/images/async.png" alt="Asynchronous JavaScript" id="async">
<article>
<p>
In the above example, if you run the code on your machine you will
see greet_one and greet_two logged even there is code in between
those 2 logs.
<br><br>
Now, setTimeout is asynchronous so it runs in background, allowing
code after it to execute while it runs. After 10 seconds,
Asynchronous will print because we set a time of 10 seconds in
setTimeout to execute it after 10 seconds.
<br><br>
In this tutorial, we will study asynchronous JavaScript in detail
so you can learn how to write your own asynchronous code.
I just wanted to give you a taste of async JavaScript using in-built
functions to whet your appetite.
</p>
</article>
<img src="./assets/images/synchronous-vs-asynchronous-js.jpg" alt="async vs sync">
</section>
<section>
<article>
<h2>How Callbacks Work in JavaScript</h2>
<p>
"A callback function is a function passed into another function
as an argument, which is then invoked inside the outer function
to complete some kind of routine or action." (MDN)
<br><br>
Let's look at a code example to see why using callbacks instead
would be helpful:
<pre>
<code>
function compute(action, x, y){ <br>
if(action === "add"){ <br>
return x+y <br>
}else if(action === "divide"){ <br>
return x/y <br>
} <br>
}
console.log(compute("add",10,5)) <br>
console.log(compute("divide",10,5)) <br>
</code>
</pre>
</p>
</article>
<article>
<p>
In the above example, we have two operations. But what if we
want to add more operations? Then the number of if/else
statements would increase. This code would be lengthy,
so we use callbacks instead:
</p>
<br>
<pre>
<code>
function add(x,y){
return x+y
}
function divide(x,y){
return x/y
}
function compute(callBack, x, y){
return callBack(x,y)
}
console.log(compute(add, 10, 5)) // 2
console.log(compute(divide, 10, 5))
</code>
</pre>
<p>
Now when we call compute with three arguments, one of them is an
operation. When we enter in the compute function, the function
returns a function with a given action name. It, in response,
calls that function and returns the result.
</p>
</article>
</section>
<section>
<article>
<h2>How Promises Work in JavaScript</h2>
<p>
A promise is placeholder for the future result of an
asynchronous operation. In simple words, we can say it is a
container for a future value. <br>
When using promises, we don't need to relay on callbacks which
helps us avoid callback hell. <br>
Before showing you how promises work through code, I'll explain
promises using the analogy of a lottery ticket. <br>
Promises are like lottery ticket. When we buy a lottery ticket,
it says we will get money if our outcome is right. This is like a
promise. The lottery draw happens asynchronously, and if the
numbers match, we receive the money which was promised.
<br><br>
</p>
Now let's look at a code example:
<pre>
<code>
const request = fetch('https://course-api.com/react-store-products')
console.log(request);
</code>
</pre>
<p>
The above code is using fetch for a request from an API. It
returns a promise which will get a response from the server.
</p>
<img src="./assets/images/1212.png" alt="example code" id="code1">
<p>
This is how a promise looks. It has a particular promise state
and result. When a promise is created it runs asynchronously.
When the given task is completed, then we say the promise is
settled. After the promise is settled, we can have either a
fulfilled or rejected promise state based on the outcome of the
promise. We can handle these different states in different ways
in our code.
</p>
</article>
</section>
<section>
<article>
<h2>How to Consume Promises</h2>
<p>
We can consume a promise using the then() method on the promise.
Producing code is code that can take some time to complete. <br>
Consuming code is code that must wait for the result. <br>
So if we consume a promise, this means that when we make a
request, we wait for the result. Then after result arrives, we
perform some operation on those results. <br>
Let's continue using the above example to understand how we can
consume a promise.
</p>
<pre>
<code>
const request = fetch('https://course-api.com/react-store-products').then((response) =>{ <br>
console.log(response); <br>
return response.json() <br>
}).then((data) =>{ <br>
console.log(data); <br>
})
</code>
</pre>
<p>
We make a request to the country API. Then, after the fetch
request, we use the then() method to consume the promise. After
that, we return a bunch of information like header, status, and
so on (you can see it in the below output image). <br>
So we specifically need data which we need to convert to JSON
which returns a promise. The data which is returned when we make
a API request gets returned in the form of a promise. <br>
To handle that promise, we again use the then() method to log
data from the response. Using multiple then() methods on a
single request is called chaining promises.
</p>
</article>
<img src="./assets/images/22.png" alt="example code">
</section>
</main>
<aside>
<fieldset>
<legend>For Queries</legend>
<label for="name">
<p>Name : <input type="text" name="Name" id="Hammad" placeholder="John" required></p>
</label>
<label for="email">
<p>E-Mail : <input type="email" name="Email" id="Hammad" placeholder="Example@gmail.com" required></p>
</label>
<label for="phone">
<p>Phone :
<select>
<option value="">92</option>
<option value="">40</option>
<option value="">48</option>
<option value="">250</option>
<option value="">966</option>
</select>
<input type="Phone" placeholder="03*****" required id="phone"></p>
</label>
<label for="query">
<textarea id="query" rows="10" cols="50" maxlength="500" placeholder="Enter your query"> </textarea>
</label>
<div>
<input type="submit">
</div>
</fieldset>
</aside>
<hr>
<footer>
<span>
<pre>
Thank's For Reading the page.
support us on <a href="#">xyz.com</a>
Subscribe <a href="https://www.youtube.com/@darkknight0790">Dark Kn1ght</a> on Youtube.
<br><br>
Created By <strong>KeyBoard Crackers</strong><code> Saif-ur-Rehman & Hammad Afsar</code>
</pre>
</span>
</footer>
</body>
</html>