1
00:00:00,340 --> 00:00:01,180
Hello, guys.

2
00:00:01,180 --> 00:00:02,620
Good to see you back once again.

3
00:00:02,620 --> 00:00:08,080
I'm back with a new tutorial related advanced JavaScript and in this tutorial we are going to learn

4
00:00:08,080 --> 00:00:10,630
a new method which is fetch.

5
00:00:10,660 --> 00:00:13,990
In our previous tutorial we learn about Asics.

6
00:00:14,020 --> 00:00:19,170
With that, we learn a new method name XML http request.

7
00:00:19,180 --> 00:00:27,160
With the help of it, we can use Asics in JavaScript, but it's come with little disadvantage because

8
00:00:27,160 --> 00:00:29,960
we need to write some line of unnecessary codes.

9
00:00:30,070 --> 00:00:36,370
To solve this kind of problem, JavaScript introduce a new method which is fetch.

10
00:00:36,550 --> 00:00:40,950
Using fetch method, we can do everything what we did with Asics.

11
00:00:40,960 --> 00:00:48,430
Basically, we can create card application using fetch method if you want to insert data in your database.

12
00:00:48,460 --> 00:00:49,210
Yes you can.

13
00:00:49,210 --> 00:00:53,520
Also you can update your data, read your data and delete your data.

14
00:00:53,530 --> 00:00:59,800
It quite fast compared to XML, Http request and also it is very lightweight.

15
00:00:59,830 --> 00:01:00,340
Now.

16
00:01:00,340 --> 00:01:03,520
Now let me show you the syntax of fetch method.

17
00:01:03,820 --> 00:01:10,120
At first we need to call the fetch method fetch round braces and semicolon to in this line.

18
00:01:10,150 --> 00:01:16,390
Then if you want to read a file from the server in that case you need to provide the file path.

19
00:01:16,390 --> 00:01:20,170
Otherwise URL and it could be any file.

20
00:01:20,170 --> 00:01:28,060
It may be a text file, json file, php file, any server side file, and this fetch method return a

21
00:01:28,240 --> 00:01:29,230
promise.

22
00:01:29,230 --> 00:01:35,020
And as we know, whenever we return a promise it could be successful otherwise failed.

23
00:01:35,020 --> 00:01:39,790
And if our promise returns success, we need to use then function.

24
00:01:39,790 --> 00:01:42,580
And we are going to do the same thing with fetch.

25
00:01:42,580 --> 00:01:47,020
And as you know using then function, we can do our further work.

26
00:01:47,050 --> 00:01:51,010
But here we use then function to print the data in our document.

27
00:01:51,040 --> 00:01:55,210
Because this then function also returns a promise.

28
00:01:55,210 --> 00:02:00,070
So again we need to use a then function to handle this promise.

29
00:02:00,280 --> 00:02:03,940
Then again at the same way we need to create a function inside this.

30
00:02:03,940 --> 00:02:11,410
Then function and this function going to receive the response from the server whatever data we get from

31
00:02:11,410 --> 00:02:11,960
this URL.

32
00:02:12,010 --> 00:02:15,850
Otherwise file we are going to send this data to this function.

33
00:02:15,850 --> 00:02:21,100
And it's going to store to this variable in our case response.

34
00:02:21,100 --> 00:02:24,490
And you can take any variable name as you wish.

35
00:02:24,640 --> 00:02:27,850
And we do not print this response in our document.

36
00:02:27,850 --> 00:02:30,580
Just we return this response.

37
00:02:30,760 --> 00:02:34,270
Return response dot data.

38
00:02:34,270 --> 00:02:38,260
Data means data format data is not a method.

39
00:02:38,290 --> 00:02:44,950
Here we need to mention what type of data we receive from the server text data, otherwise Json data.

40
00:02:45,070 --> 00:02:52,630
And after receiving the data, we need to send the data in another then function and we can handle it

41
00:02:52,630 --> 00:02:54,490
like that dot.

42
00:02:54,490 --> 00:02:58,960
Again, we need to call, then function, then inside the then function function result.

43
00:02:59,320 --> 00:03:00,640
So this is our first.

44
00:03:00,670 --> 00:03:03,760
Then function and this is our second then function.

45
00:03:03,760 --> 00:03:07,570
So as I told you our first then function also return a promise.

46
00:03:07,570 --> 00:03:11,410
And we need to handle this promise with another then function.

47
00:03:11,590 --> 00:03:14,980
And here we take a variable name result.

48
00:03:15,100 --> 00:03:19,120
Now we can use the final result which I got from the server.

49
00:03:19,120 --> 00:03:22,930
We can use it anywhere if you want to use it with console.

50
00:03:22,930 --> 00:03:26,500
Yes you can also you can print in your document.

51
00:03:26,500 --> 00:03:29,050
So this is the success part of promise.

52
00:03:29,050 --> 00:03:33,490
And as you know with promise we can also handle the failed part.

53
00:03:33,520 --> 00:03:37,300
To handle the error part we need to use catch function.

54
00:03:37,600 --> 00:03:44,350
So this is how at the same way we can use catch function to handle the error and print error message.

55
00:03:44,350 --> 00:03:46,780
Last we need to use catch function.

56
00:03:46,780 --> 00:03:48,790
Then we need to create a function.

57
00:03:48,790 --> 00:03:50,290
And we need to take a variable.

58
00:03:50,290 --> 00:03:53,200
And this variable is going to store the error message.

59
00:03:53,680 --> 00:03:56,170
And we can print the error message in our console.

60
00:03:56,170 --> 00:03:57,340
Otherwise document.

61
00:03:57,340 --> 00:04:01,210
So this is how our fetch API otherwise fetch method work.

62
00:04:01,210 --> 00:04:06,000
But remember to run a fetch method you need to use live server.

63
00:04:06,010 --> 00:04:09,190
Live server is very important to run which method.

64
00:04:09,190 --> 00:04:13,270
If you install Xampp or Wamp live server then it's okay.

65
00:04:13,270 --> 00:04:19,180
But if you don't have live servers then you can install live server extension.

66
00:04:19,180 --> 00:04:25,210
In our case, I'm going to use Visual Studio Code Editor and we are going to use live servers.

67
00:04:25,210 --> 00:04:28,660
So without live server fetch API is not going to work.

68
00:04:28,660 --> 00:04:30,790
So this is it for this tutorial.

69
00:04:30,790 --> 00:04:33,610
From the next tutorial we are going to start the practical.

70
00:04:33,610 --> 00:04:35,170
So thanks for watching this video.

71
00:04:35,170 --> 00:04:36,970
Stay tuned for the next tutorial.