Hi and welcome to this code cast series on A P. I. S. So when you're working with a P. I. S. You're bound to come across the fetch api and normally we make a request to an api and get written some information which we can then use at our end to make an app or we can use not to make an app but we can use it inside of the app to do something. Now to use the fetch api you're going to use you need two things. So let's take a look at the syntax which gives us a lot of clues on what we need. Well first of all we need this fetch method and the fetch method will take as an argument A U R. L from where we want to retrieve the data from. Now it can also take an optional config object as an argument and this allows you to set various settings for the request. For example you can add headers, maybe body with some data set, the mood for cross origin requests and so on and normally you will see it like this. Uh The config option out here. The fig config argument is optional. Okay. Now the second thing that you will need our promise handler functions which you can see I've changed out here. So then and then the second then and then the catch so these are promised handler of functions. Okay, now every time you make a request, the result which is the data returned by the fetch method will be a promise. So when the fetch promise gets fulfilled the data it receives is passed to handler functions which are attached to it. So if and when you want to work with this data you have to do it from inside of these handler functions out here. Okay, Now the two common handler functions are then and catch right. So the then handler function helps you to handle the fulfilled state of a promise. So that means you successfully retrieved the data and we can handle any rejected promises by using this catch method. So uh this is the syntax of the fetch api and like I said, um it's giving us a lot of clues. So first data from the U R. L is fetched and the response is returned which is an entire http response. And we can then extract the Jason content from the response using response dot Jason. So that Jason method. Now after we've gotten this data we can then console log the data. Um and the then method is part of the promise api and it's you know used to deal with asynchronous tasks such as api calls. So this method is taking a callback function as an argument which itself takes the return data as an argument. And then we're just logging this data in this example and we're also using catch method here to catch any areas. This will handle any areas inside the promise. Now we'll go ahead and try this out and I'm actually going to use some place holder data from here, so from Jason placeholder. Right, So this is a free fake api for testing and prototyping, it's gonna give you some test data and endpoints from where you can get your data to test fetch, so. And what we can do is I'm actually going to do this example in code pin out here. Right, so this is what I'm going to do. So I'm going to first uh I'm just going to set this up fetch Okay? So I'm setting this up fetch and then then which is going to take as an argument and response, so I'm just like I said I'm just setting up the syntax out here. Okay, And then we have one more now you can use arrow functions if you want. I'm just not using arrow functions here just to make it a little more verbose it is. And then I believe the syntax is wrong because we need this. Okay, so ignore all of this, but now what I'm going to do is I'm actually going to go here and get this uh fetch data from here and I'm only gonna do uh I'm going to get the two DUIs now if you want to take a look at what data we're getting its we can click on toodles here and basically copy this link. Okay, so this is all the information we're going to be fetching from this U R L. And let me go back here and let me within quotes put in the U. R. L. Now, once I fetch some data from this resource, the U R. L. Then I want to return the response dot Jason. So basically remember that we're using Jason, this method ah to basically handle the data that we're going to retrieve and we have to extract the data using response dot Jason because what we're getting is an entire http response. We only want our and Jason. Right. And then out here I can instead of response basically now I'm getting some data and I want to console dot log this data and then out here if there's any errors, I want to console log the errors. But that happened fast and out here. You can see That we successfully retrieved all 200 of those two DUIs. Right? So you can see we're getting an array of objects and each object has these key value pairs user IDI. D. title and completed. Right? So that is about all we need to know for this part. We in the next code cast we will actually do something inside of this promise handler function to display the data on a webpage