Fetch API JavaScript in Easiest way | Fetch API Tutorial

today we are talking about fetch API and how to call Api or make HTTP request using fetch API in JavaScript it pretty simple and easy to use so let's start this so fetch API is the easiest way to make any HTTP request in JavaScript we have Ajax XML HTTP request also for making HTTP request but they are little complex in compared to fetch method so let's see fetch method with the example so here I link the script file with this HTML file and open it with the live server see here we get this message so it's working now here we are going to use my favorite API Json placeholder I will give this link in the description box so you can also use that here we have get request for getting 10 users data so we get that user's data from the API and we can do whatever we want to like display it on our web page so let's copy this API URL and in the script.js file we add fetch method and in this method at first parameter we always pass the API URL in quotes now this expression return a promise if you don't know promise you can watch this asynchronous JavaScript tutorial and come back to see this tutorial in simple words when we call any API they take some time to get execute promise will return a value when that execution will complete or if something went wrong it will return error just see this and you will understand that so if promise return data you can get the data using then method now in this then method we have to pass callback function so function and we get this response as parameter now let's simply consult or log this response save this and take a look here we get bunch of properties related to that API call like status URL body this body has all the data now you might think why can't we see that it's because we have to convert that data into Json format so right here response.json and save this see we again get promise here now click on this little arrow and in This Promise result we get that user data so for accessing this data we have to return response.json from this function so we get promise now again we use then method for handling promise and we pass here callback function and we get here our data as parameter and inside this function we consult.log this data sales is and take a look see we get user's data now we can simplify this code by using Arrow function syntax so we remove this function keyword and add here Arrow syntax and also remove the Scully brackets and return also do the same with this function Arrow and get rid from this curly brackets sales is and see how clean and simple it looks and it works the same as before so it's how simple to use fetch method to call an API of get method now let's see how we can call Api of post put and delete so we write again patch method and now we add here API for post request to add new post now we have to pass another argument for post put delete request which is configuration object now the first property of this object is method and here we pass our API method which is post now if you want to send data with this API call then we can do that using body property so I create here variable call data which is an object with three property which they mentioned in API guide if you are using another API then you have to check its fields from its guide so first we have title and I pass this is title then we have body and I pass here this is post body and last we have to pass user ID which is let's say too now here is the one thing we have to make sure when we are sending data with API some API cannot accept data in Json format again that totally depends on the API so we write Json Dot stringify and pass here our data this will convert our data into string format and at last we have to pass here our header with content type so headers and we pass here object and inside it we write content type to application slash Json don't worry about that if someone give you API then they will also give you this informations so you have to just learn fetch method now for getting the response from API we have to add two then methods same as we did previously so write then and inside it we pass response Arrow function and response.json now that will return again promise so we add another then and data Arrow function and simply console.log that data save these and see we get new post with ID 101 so that's how we make post request now if you want to make put or delete request then just change here method to put or delete in get request we don't need to pass method because fetch API by default use get method if you don't specify method now let's recap what we learned so for making any HTTP request we use patch method and in the first argument we pass our API URL now that expression written a promise so we use then method and first we have to convert that response into Json and in another then method we can access that data now if you want to make post put delete request we have to pass configuration object as second parameter in which we add method for method type body for passing data but pass that data in json.stringify and headers for content type to application slash Json simple as that so I hope you understand fetch method in JavaScript in the description box you get free pdf of fetch API and at last you get the bonus also hit the like button for the algorithm and leave a comment if you want tutorial on another topics a lot of tutorials are coming see you in the next tutorial goodbye

Channel: Code Bless You

Views: 34,539

Keywords: code bless you, fetch, fetch api javascript, fetch api, fetch javascript, javascript fetch api, javascript fetch, how to fetch data from api in javascript, javascript fetch tutorial, javascript fetch post, javascript fetch api and promises, javascript fetch explained, fetch tutorial, javascript fetch json, javascript fethc tutorial, javascript fetch post request, js fetch api, javascript fetch api json, JavaScript, call api javascript, js fetch, js fetch explained, js fecth

Id: Pnlt1NiBt68

Length: 7min 39sec (459 seconds)

Published: Mon Dec 05 2022