Fetch API | JavaScript Tutorial in Hindi #66
Fetch API | JavaScript Tutorial in Hindi #66
Link to the Repl - https://replit.com/@codewithharry/66F…
Join Replit - https://join.replit.com/CodeWithHarry
Download Notes - https://drive.google.com/drive/folder…
Ultimate JS Course Playlist: • JavaScript Tutorials for Beginners in…
►Checkout my English channel here: / @programmingwithharry
►Instagram: www.instagram.com/codewithharry
python, C, C++, Java, JavaScript and Other Cheetsheets [++]:
Playlist: • Coding CheatSheets 🧾 by CodeWithHarry
►Learn in One Video[++]:
Python[15 Hr]: • Python Tutorial For Beginners In Hind…
Python Advance[3.5 Hr]: • Python Programming Course in Hindi (A…
Python[1 Hr]: • Learn Python In Hindi In One Video - …
Python[2 Hr]: • Python Tutorial In Hindi 🔥
Python[15 Min]: • 15 Minute Python Tutorial For Beginne…
JavaScript[1 Hr]: • JavaScript Tutorial
C[1.3 Hr]- • C Programming Tutorial For Beginners:…
php[1 Hr]: • Learn Php In One Video In Hindi - हिं…
php[2.3 Hr]: • Php Tutorial for Beginners in Hindi w…
php[Project]- • Login And Registration Form Using Php…
HTML[30 Min]: • HTML 5 Tutorial For Beginners In Hind…
CSS[8.5 Hr]: • CSS Tutorial In Hindi (With Notes) 🔥
CSS[1.4 Hr]: • CSS 3 Tutorial For Beginners: Learn C…
Wordpress[3.2 Hr]: • How To Make a WordPress Website | Wor…
Angular[2 Hr]: • Angular Tutorial in Hindi
Java[2.3 Hr]: • Java tutorial in hindi 🔥
Web Scraping[1 Hr]: • Web Scraping Tutorial using Python an…
MongoDB[2 Hr]: • MongoDb Tutorial For Beginners in Hin…
Numpy[1 Hr]: • Numpy Tutorial in Hindi
Android Dev[12 Hr]- • Android Development Tutorial For Begi…
Linux[1 Hr]: • Linux Tutorial For Beginners in Hindi
JQuery[1.1 Hr]: • jQuery Tutorial For Beginners In Hind…
Git and GitHub[1.1 Hr]: • Git \u0026 GitHub Tutorial For Beginners I…
►Complete course [playlist]:
React: • React Js Tutorials in Hindi
Python- • Python Tutorials For Absolute Beginne…
OOP Python- • Object Oriented Programming Tutorials…
Java: • Java Tutorials For Beginners In Hindi
JavaScript- • JavaScript Tutorials In Hindi
PHP- • PHP Tutorials in Hindi
C- • C Language Tutorials In Hindi
C++- • C++ Tutorials In Hindi
Git \u0026 GitHub- • Git and GitHub Tutorials In Hindi
Android Dev- • Android Development Tutorials in Hindi
Python GUI- • Python GUI: Tkinter Tutorial In Hindi…
Web Development- • Web Development Tutorials For Beginne…
Python Django: • Python Django Tutorials In Hindi
Projects Using HTML, CSS \u0026 Javascript- • Projects Using HTML, CSS \u0026 JavaScript…
Data Structure and Algo: • Data Structures and Algorithms Course…
Follow Me On Social Media
►Website (created using Django Rest \u0026 Angular): https://www.codewithharry.com
►Facebook: https://www.facebook.com/CodeWithHarry
►Instagram: https://www.instagram.com/codewithharry/
Twitter: https://twitter.com/CodeWithHarry
Comment “#HarryBhai” if you read this 😉😉
Content
0 -> Guys today's video I want to dedicate,
2.149 -> To fetch API.
3.211 -> We will study about fetch API.
5.211 -> Whenever we want to take data from network,
7.211 -> Or on network which means on server we have to upload data
10.384 -> Then we use fetch API.
12.085 -> What are the specifics? How convenient it is?
14.746 -> How does it work with promises?
17.3 -> Let's move to computer screen.
19.087 -> And let's see all these things.
26.63 -> Today I would like to talk about fetch API .
28.63 -> And I will tell you, how you can send network request?
31.223 -> Using JavaScript.
32.498 -> Here to explain you, I have made a repl.
35.927 -> In which I will work.
36.989 -> I will open a new tab in it.
38.392 -> And I will close this from here.
40.392 -> So all the coding I am going to do here,
41.942 -> I will get it in this repl.
43.756 -> If this page's title, I save as Fetch API.
48.163 -> And I will reload this page
50.507 -> Then look here too title is Fetch API.
52.597 -> This coding page is in sync.
54.524 -> I am using replet.
55.762 -> Now here what will I do?
57.233 -> I will tell you about fetch API.
60 -> Before that what will I do?
62 -> I will search free API.
63.694 -> Maybe I get a good free API.
65.869 -> And look here on GIT hub I have got a repo.
69.22 -> And I know this repo very well.
71.21 -> And I have used it with public API name.
73.633 -> Here you get public API's.
76.369 -> So here on different themes you get public API's.
79.536 -> And you want authentication or not
82.24 -> This is also being told to you over here.
84.573 -> And look over here,
87.16 -> This is not working but
88.35 -> I will do one thing,.... um..
91.331 -> I will find such API, in which.. which we can use.
95.122 -> To see that our JavaScript can fetch API or not.
98.508 -> Now, here I have got one API.
100.508 -> As you can see by the name of 7 timer.
102.482 -> Actually I went on weather.
103.993 -> And there I got this first API,
107.082 -> In which authentication was not required ok.
109.101 -> So this is a very good example.
111.254 -> If you want to use something else,
113.538 -> Like weather API I can try.
115.329 -> So I will do it, now look over here
118.233 -> Any cities weather
120.233 -> By using this application
122.491 -> You can find it. Suppose I add Delhi over here.
125.155 -> Maybe I will get Delhi weather.
126.73 -> It shows not found.
127.868 -> If over here suppose I do NY
132.405 -> New York, then maybe it will show me something.
134.618 -> And it shows me look over here.
135.76 -> So let's use this. This is a practical example.
138.783 -> So I took this API.
140.46 -> And to teach you fetch I am going to use this.
143.216 -> So fetch syntax is very easy.
145.315 -> You will write let A = fetch
148.924 -> Now, what is a? I will tell you now.
151.151 -> A is a promise. ok.
152.675 -> Rather I will call it as p.
155.573 -> Because it is a promise.
157.069 -> Now, look what will I do over here?
158.379 -> Here I will write, p.then
161.346 -> And suppose after that I will write a over here
164.265 -> Or else I will write value,
165.604 -> In whichever value my promise is being resolved
167.369 -> And after that I will write return value.
171.118 -> And after that I will write,
173.588 -> .then
175.588 -> I will change one more then.
177.588 -> And I will do this work again.
179.311 -> Now, some people find this super confusing
181.442 -> And I will write value.json
184.145 -> Or else I will do one thing, I will make it value 1.
186.308 -> And this as value 2.
187.679 -> It does not matter because this is a function with itself.
190.186 -> And this function is within itself.
192.015 -> So it does not matter.
193.68 -> Before we see the syntax
195.905 -> And get confused over here,
197.061 -> I want to bring you again over here.
198.966 -> And what will I do over here,
201.324 -> I will tell you about fetch.
203.324 -> JavaScript can be used to send & retrieve information
206.208 -> Using the network when needed.
208.315 -> Ok, whenever you want
210.294 -> Whenever you need anything that is in network,
213.04 -> Like weather,
213.74 -> Like you want to use any API
216.018 -> Which is already made by someone for you.
217.68 -> If you want to do that.
218.888 -> Then you can use this.
220.005 -> There is an umbrella term , ajax
221.792 -> Whose full form is
223.6 -> Asynchronous JavaScript and xml.
226.858 -> Ok, Asynchronous JavaScript and xml.
229.327 -> This umbrella term
231.498 -> It was used before, when with the help of xml
234.82 -> We used to take network request.
236.351 -> Nowadays json is very popular.
238.351 -> And fetch API has came to make people's life easy.
241.353 -> Previously , xml http syntax that was there
244.129 -> In that xml was used,
246.346 -> And so it had the name Ajax.
247.324 -> Since then people started calling ajax.
249.138 -> And today also if you say to someone,
251.235 -> My page fetches the data without loading.
254.067 -> Then they will ask you, do you use ajax?
256.685 -> Then he will say yes.
257.427 -> Why is he saying yes? Because it is a umbrella term
259.225 -> You can't say that I don't use xml.
261.694 -> Ajax is not been used.
262.948 -> It is been used.
263.67 -> Ajax term is used even today.
265 -> Your interviewer can also ask you.
266.33 -> Let's talk about fetch API.
267.739 -> I told you how fetch API returns a promise.
270.273 -> Simply give the URL.
271.591 -> We will see the options.
273.186 -> For now, leave the options blank.
274.845 -> The request you are sending without options
277.527 -> That is a get request.
278.878 -> Now, we have get request.
280.425 -> We have put request, delete request.
282.257 -> Post request is there.
284.123 -> Now, we will talk about simple get request.
286.123 -> Get request means you are bringing data from URL. Ok, simple.
290.115 -> And you are displaying it and doing something with it.
293.197 -> Now, look over here the syntax I told you
295.581 -> of .then .then
297.601 -> Many of you may find it confusing
300.337 -> Ok, why will you find it confusing?
302.061 -> Now, look over here
303.149 -> Actually I wrote syntax somewhat wrong.
305.052 -> Here I will p.then (value1)
307.139 -> And after that value1.json
308.811 -> And instead of return I will do console.log
311.296 -> Here I will write console.log(value2)
313.997 -> And I can write value
315.255 -> Because this are different functions with itself.
317.244 -> Now, why is this syntax so confusing?
319.777 -> And how you guys can make syntax easy for you?
323.632 -> I will tell you that.
325 -> Now, look as I will refresh it
327.746 -> Then look my data arrived over here.
329.192 -> Ok, here I got windspeed.
331.682 -> Here I got temperature.
333.822 -> I have got the description
335.209 -> I got everything.
336.186 -> I got an array of forecast.
337.553 -> In which they will tell about forecast.
339.814 -> That in first day this happen and second day this will happen.
342.18 -> And on third day this will happen, which is great.
343.861 -> Which is awesome.
344.624 -> Ok, an weather can be made with the help of this API.
347.306 -> But let me explain this syntax to you guys,
349.839 -> Whenever you fetch anything
351.711 -> Then what happens?
352.752 -> You get a promise.
356.053 -> And that promise is resolved
359.098 -> In one more promise.
361.098 -> Whose value is a final result.
364.196 -> So you need to add .then two times.
366.015 -> And you will say why this happens over here?
367.653 -> We are going to make fetch API.
368.682 -> I will tell you,
370.472 -> Look, we will come to notes to understand this thing,
373.304 -> But if very quickly
375.304 -> JavaScript developers are been told that
377.986 -> Remember this syntax.
379.581 -> This is being told. It is seriously been told.
381.346 -> Why is it told?
382.429 -> Because it is very easy for them.
383.917 -> They are been told that
384.894 -> In fetch API two .then are used.
386.894 -> By adding two .then you get value over here.
389.32 -> Do anything with it over here
390.872 -> And here you need to .json
392.872 -> Now, I will tell you
394.143 -> Why is it two stage process?
396.335 -> Ok.
396.929 -> So Fetch is used to get data over network
398.699 -> We saw this.
399.441 -> Getting the response at two stage process ok.
401.768 -> So two .then are used.
403.253 -> Why is it two stage process?
404.898 -> An object of response class containing stack has
407.614 -> An ok properties.
409.368 -> Firstly you get
411.456 -> You get a response class status ok.
414.264 -> One response class object sorry.
416.264 -> In this our status becomes ok.
417.774 -> Http status code will be there inside it.
419.454 -> Which means in this promise
422.477 -> If I do console.log
425 -> Value1.status
427.661 -> And
429.829 -> Umm... sorry I will do one thing over here
431.829 -> When my first promise is getting resolved
434.298 -> The first promise that I get is getting resolved
436.298 -> That time what will I get
437.564 -> Value1.status and value1.ok
440.919 -> Now if I save it
442.359 -> Then look, as I will reload
444.838 -> Look 200 and true came first
448.687 -> Then after that data is returned which means
450.736 -> I will get to know what is status code.
452.909 -> And I will also know that everything is alright or not.
455.695 -> Means if I have got status code between 200 to 299
459.822 -> Because apart from this if I get any status code
462.009 -> Either I get 404 or 500
464.371 -> Of run server error
465.603 -> I will know that here itself
466.963 -> My response worked properly or not.
469.304 -> It will true if everything is alright.
471.827 -> Ok, after this look over here
474.403 -> The status is http status code.
476.403 -> For example it can be 200. ok
478.604 -> And it can anything else too, but this is status code.
482.248 -> Now, once you get status code over here
484.248 -> Here if you want to anything else then do it.
486.237 -> Because response can be big & it may take time.
488.705 -> So this is made a two stage process.
490.537 -> If you come to know here itself
492.891 -> If you don't get any response then you can take any action.
495.584 -> It is a simple thing.
496.475 -> So here you can do this work.
498.867 -> After .then what can you do?
501.294 -> which means your one promise will be resolved
503.123 -> It will give you status all ok
504.654 -> After this you will return one promise.
506.398 -> Value1.json is a promise
507.857 -> Which will do what?
508.881 -> Which will resolve
510.113 -> In json value.
511.559 -> In json response ok.
513.154 -> So two .then are added.
515.154 -> So look over here, after that
517.08 -> To access the body in different format.
519.159 -> Now you can do response.text
521.571 -> You can do response.json
523.026 -> There are many more methods.
524.839 -> Which you can use
527.229 -> An advance JavaScript user
528.836 -> In blog, if you want to take data in blog
531.369 -> You can use array buffer
532.601 -> If you want to take you data in form data
534.533 -> Then you can use form data function ok.
537.158 -> What will .text do? It will return text.
539.158 -> .json will return you a javascript object.
541.91 -> Which will come after passing your json.
544.108 -> Ok, if you are sure that your data is going to come in json
546.925 -> Then you will use it.
548.728 -> Let's move further.
549.662 -> We can use only one body reading method.
551.662 -> It is not like you used response.text
553.982 -> Then you are saying you want in json. No.
555.982 -> Once you used response.json
559.674 -> I will do this response
561.914 -> Ok, why am I making it response?
562.933 -> Because this is a response ok.
564.293 -> Here response.ok
567.082 -> I had to response.json
568.805 -> So I did it, here I will get json.
570.881 -> Now, it is not like once I used over here
573.222 -> It's not like I did console.log once
575.78 -> To my response.text
577.572 -> Now, I am saying give me in json.
579.929 -> Once, you run this method
581.7 -> Anything json, text
583.914 -> After that you can't run it.
585.718 -> I will show you as I will reload over here
587.535 -> Problems will start coming over here.
588.876 -> And why that problems will come
590.115 -> I will tell you this also.
591.271 -> Look, here there is one problem
593.296 -> Failed to execute json response.
595.042 -> Body stream already read.
596.643 -> You have read it, you ran .text
599.264 -> Now what you want? Why are you running it again?
601.016 -> So you can't do that.
602.395 -> You can do it just once.
603.376 -> Either do response.json or response.text
606.924 -> Then after that when this promise will resolve
608.711 -> Then here you will get your value like this.
611.884 -> ok, if you ran json
613.884 -> Then you will get javascript object
615.244 -> If you ran text, then you will get a string.
617.756 -> ok
618.824 -> Very well.
620 -> Now, let's talk about response header.
622 -> Ok, lets talk about response.header
623.905 -> Response headers are available in response.headers.
626.347 -> Ok, if you want headers
627.973 -> You want response.headers
629.019 -> Then here you can do one more thing.
630.604 -> You can do response.headers.
633.954 -> And as you will reload this
637.831 -> Then you will get headers over here
639.085 -> Which are empty right now.
640.253 -> I did not get any response.headers
641.677 -> Ok, so if you want to print reponse headers
644.543 -> Then you can do that.
645.631 -> How will you print request header?
647.769 -> You don't want to print request headers
650.157 -> If you will pass request header
652.928 -> With a request. Now look
654.097 -> what is difference between request & response headers?
656.096 -> Request headers are the headers which we give with request.
659.641 -> We say take this header.
661.001 -> Take my authentication token.
662.809 -> Take some information from us,
665.473 -> Some additional about this request.
666.695 -> ok, this are our headers.
667.923 -> And the response you get
670.609 -> Some headers you get
672.109 -> That is response ok.
673.364 -> So both are important.
675.038 -> To set a request header in fetch.
677.005 -> You set request headers.
678.544 -> And you print response header.
681.106 -> Ok, so set request headers
684.742 -> In fetch you can use this syntax.
686.385 -> Here you can add url.
687.969 -> Make an object and give key as header.
690.262 -> And make one more object
691.229 -> Authentication : 'secret'
692.227 -> Pass one more object ok.
694.397 -> Give an object of name headers in options.
696.098 -> This is options object.
697.416 -> Which means options is an object itself.
699.167 -> Whose key is headers.
701.008 -> And value is an object.
702.475 -> In side this you can pass headers.
704.006 -> Ok, so things can be done.
705.836 -> I hope you have understood it.
707.836 -> And you can do it properly.
710.838 -> Ok, if you haven't accessed JavaScript playlist
713.67 -> Then definitely access it.
715 -> And by clicking here definitely book mark it.
717.917 -> By clicking here definitely save it.
719.576 -> Almost 15 lakh people have accessed it.
722.173 -> Very happy to see the feedback of this course.
724.173 -> Thank you so much for all the feedback.
726.557 -> For now only this much for this video guys.
728.067 -> Thank you so much guys for watching this video.
730.451 -> And I will see you next time.
Source: https://www.youtube.com/watch?v=Atq7VjVbaA8