Hello, guys.
Good to see you back once again.
I'm back with a new tutorial related advanced JavaScript and in this tutorial we are going to learn
a new method which is fetch.
In our previous tutorial we learn about Asics.
With that, we learn a new method name XML http request.
With the help of it, we can use Asics in JavaScript, but it's come with little disadvantage because
we need to write some line of unnecessary codes.
To solve this kind of problem, JavaScript introduce a new method which is fetch.
Using fetch method, we can do everything what we did with Asics.
Basically, we can create card application using fetch method if you want to insert data in your database.
Yes you can.
Also you can update your data, read your data and delete your data.
It quite fast compared to XML, Http request and also it is very lightweight.
Now.
Now let me show you the syntax of fetch method.
At first we need to call the fetch method fetch round braces and semicolon to in this line.
Then if you want to read a file from the server in that case you need to provide the file path.
Otherwise URL and it could be any file.
It may be a text file, json file, php file, any server side file, and this fetch method return a
promise.
And as we know, whenever we return a promise it could be successful otherwise failed.
And if our promise returns success, we need to use then function.
And we are going to do the same thing with fetch.
And as you know using then function, we can do our further work.
But here we use then function to print the data in our document.
Because this then function also returns a promise.
So again we need to use a then function to handle this promise.
Then again at the same way we need to create a function inside this.
Then function and this function going to receive the response from the server whatever data we get from
this URL.
Otherwise file we are going to send this data to this function.
And it's going to store to this variable in our case response.
And you can take any variable name as you wish.
And we do not print this response in our document.
Just we return this response.
Return response dot data.
Data means data format data is not a method.
Here we need to mention what type of data we receive from the server text data, otherwise Json data.
And after receiving the data, we need to send the data in another then function and we can handle it
like that dot.
Again, we need to call, then function, then inside the then function function result.
So this is our first.
Then function and this is our second then function.
So as I told you our first then function also return a promise.
And we need to handle this promise with another then function.
And here we take a variable name result.
Now we can use the final result which I got from the server.
We can use it anywhere if you want to use it with console.
Yes you can also you can print in your document.
So this is the success part of promise.
And as you know with promise we can also handle the failed part.
To handle the error part we need to use catch function.
So this is how at the same way we can use catch function to handle the error and print error message.
Last we need to use catch function.
Then we need to create a function.
And we need to take a variable.
And this variable is going to store the error message.
And we can print the error message in our console.
Otherwise document.
So this is how our fetch API otherwise fetch method work.
But remember to run a fetch method you need to use live server.
Live server is very important to run which method.
If you install Xampp or Wamp live server then it's okay.
But if you don't have live servers then you can install live server extension.
In our case, I'm going to use Visual Studio Code Editor and we are going to use live servers.
So without live server fetch API is not going to work.
So this is it for this tutorial.
From the next tutorial we are going to start the practical.
So thanks for watching this video.
Stay tuned for the next tutorial.