-
Notifications
You must be signed in to change notification settings - Fork 0
/
2-2-2.js
319 lines (241 loc) · 9.78 KB
/
2-2-2.js
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
// function fetchcallcustom(url,fn)
// {
// console.log("Starting Download from: ",url);
// setTimeout(function proc()
// {
// console.log("Download Completed");
// let response="Dummy data";
// fn(response);
// data=response;
// },3000);
// }
// function writefile(data,fn)
// {
// console.log("Started writing data: ");
// setTimeout(function process()
// {
// console.log("Writing Completed!!");
// let filename = "output.text";
// fn(filename);
// },4000);
// }
// function uploadfile(filename,newurl,fn)
// {
// console.log("Uploading Started");
// setTimeout(function process()
// {
// console.log("File",filename, "Uplaoded Successfully on",newurl);
// let uploadResponse="SUCCESS";
// fn(uploadResponse);
// console.log("Upload Ended");
// },2000);
// }
// fetchcallcustom("www.google.com",function downloadcallback(resp)
// {
// console.log("Downloaded Content: ",resp);
// writefile(resp,function writecallback(filename)
// {
// console.log("new file written is: ",filename);
// uploadfile(filename,"www.yahoo.com",function uploadcallback(uploadResponse)
// {
// console.log("Successfully uploaded",uploadResponse);
// })
// })
// });
// PROMISES - are special JS objects
// We have to learn:
// -> How to create these promises?
// -> How to consume them?
// -> What are the properties involved?
// How promises work behind the scenes?
// -> The promise object we create have 4 major properties:
// -Status/state
// -Value
// -on Fulfillment
// -on Reject
// Status/state - It shows current promise status - pending(Still going on), fulfilled(Success) or a rejected(Error) state
// Value - when status of the promise is pending, this value property is undefined.The momment promise is resolved(fulfillment state), the value property is updated from undefined to the new value(actual value/returned value/resolved value that was expected)
// So, the value property acts like a placeholder till the time promise finishes.
// onfulfillment - This is an array which contains functions that we attach to our promise object
// (to a promise object, we can attach some functions using .then() method). When the value property is updated from undefined to the new value, JS gives chance to these attached function one by one with the value property as their arguement
// (if there is no piece of code in the call stack & global code left).
// How can we write a function to download some data from a url, and not use callbacks
// indtead use promises?
/*
function fetchData(url)
{
return new Promise(function (resolve, reject) { //new Promise is a Promise Constructor and this constructor takes callback as an arguement.
//resolve-> success and reject-> failure
console.log("Started Fetching from ", url);
setTimeout(function process()
{
let data = "Dummy Data";
console.log("Completed Fetching the data");
// Somehow we need to return the data ? ->TODO
resolve(data); //function given to us by JS, the implementation will be done by JS itself
//resolve gives us option to return what we need, earlier we used to so using callbacks;
},4000);
});
}
*/
// To create a promise, call the promise constructer(using new promise).
// The promise constructor takes a callback as an arguement
// The callback passed inside constructor expects two arguements.... resolve and reject
// Then inside the callback write your logic
// **if u want to return something on success, then call the resolve function with whatever value u want to return;
/*
function demo1()
{
return new Promise(function(resolve,reject)
{
console.log("Hi");
setTimeout(function process()
{
console.log("Wohoo!! Task is done.");
resolve("Mohit is the best!!");
},10000);
console.log("by");
})
}
var y=demo1();
console.log(y);
*/
// Q- When do we consider a promise fullfilled
// -> If we call resolve() function, we consider it fulfilled.
// -> We consider it rejected if we call reject().
/*
function demo(val)
{
return new Promise(function(resolve,reject)
{
console.log("Start");
setTimeout(function process()
{
console.log("Completed Timer");
if(val%2==0)
{
// even number
resolve("Even");
}
else
{
// odd number
reject("Odd");
}
},10000);
console.log("Somewhere");
})
}
function fetch(url)
{
return new Promise(function(resolve,reject)
{
console.log("Going to start the download!!");
setTimeout(function process()
{
let data="Dummy Downloaded Data";
console.log("Download Completed");
resolve(data);
},10000);
console.log("Timer to mimic download started");
});
}
console.log("Starting the program");
console.log("We are expecting to mimic a downloader");
x = fetch("www.google.com");
console.log("New Promise Object created successfully, but downloading still going on");
*/
// Creation of a Promise object is Synchronus as it is a Javascript object and is present in ECHMA Script documentation
// Tasks:
// 1-> Write a function to download data from a url
// 2-> Write a function to save that downloaded data in a file
// 3-> Write a function to upload the file written in previous step to a new url.
// NOTE - Now use Promises!!
function fetchData(url)
{
return new Promise(function(resolve,reject){
console.log("Download Started from: ",url);
setTimeout(function process()
{
let data="Important Data!!!";
console.log("Download Completed from", url);
resolve(data); //It changes state from pending to fulfilled and value from undefined to data.
// resolve("done"); This line will never get executed as happened in callbacks, so it is advantageous for us as even if the control is with someone else, the output is expected. So, no inversion of control.
// resolve(12345); This line will never get executed as happened in callbacks, so it is advantageous for us as even if the control is with someone else, the output is expected. So, no inversion of control.
// console.log("Hello"); This will work as in setTimeout has one line to resolve so it will get printed
},5000);
})
}
function writefile(data)
{
return new Promise(function(resolve,reject)
{
console.log("Started Writing ",data," in a file");
setTimeout(function process(){
let file="result/return.txt";
console.log(data ,"written Successfully on", file);
resolve(file);
},3000);
});
}
function uploadData(file,url)
{
return new Promise(function(resolve,reject){
console.log("Uploading Files Started in ",url, "and filename is ",file);
setTimeout(function process(){
let result="SUCCESS";
console.log(file ,"Uploading SuccessFully in ",url);
resolve(result);
},5000);
});
}
// Consuming a Promise
// The promise consumption is the main beauty, using which we will avoid inversion of control.
// Whenever we call a function returning a promise, we will get a promise object which is like any JS object that we can store in a variable
// let response = fetchData("www.mohit.com"); // Q - will JS wait here for promise to be resolved if it involves any async piece of code?
// If creatin=on of promise involves sync piece of code, it will wait else not
// Here, this callback is having a asynchronus code so JS will not wait for it, it will send the code to runtime and then it will be stroed in Event queue until other code is executed
// Now, technically when promise is resolved, we have to execute some functions
// let data = fetchData("www.mohit.com");
// let filename = writefile(data);
// let response = uploadData(filename,"www.drive.google.com");
//The above code will not work on the required fashion.
// we can use .then() function on the promise object to bind the functions we want to execute once we fulfill a promise
// The .then() function takes function as an arguement that we want to execute after promise fulfills, and the arguement function takes value property as parameter.
// So, we can do ->
// let downloadPromise = fetchData("www.datadrive.com");
// downloadPromise.then(function processDownload(value)
// {
// console.log("Download Promise Fullfilled!!");
// let writePromise = writefile(value);
// writePromise.then(function writeProcess(value)
// {
// console.log("File Downloaded/Written");
// })
// })
// The above piece of code solves inversion of code but not promise hell.
// The above Callback Hell is also called Promise Hell. So, we can say that callback hell is not a big problem than inversion of control
// But we can do:
let downloadPromise = fetchData("www.datadrive.com");
downloadPromise
.then(function process(value)
{
console.log("Downloading is done with the following value", value);
return value;
})
// downloadPromise=fetchdata("url");
// downloadPromise.then(function f(value){
// console.log(value);
// return "Mohit";
// })
// So, in the above piece of code, .then() function returns another promise
// So, we can save us from promise hell by:
.then(function writePromise(value)
{
return writefile(value);
})
.then(function processUpload(value)
{
return uploadData(value,"www.mj.com");
})
// Apart from the event queue, we have a microtask queue also