Being a beginner to the world of Software Engineering is very challenging. Especially for the people who had absolutely zero experience in coding just like me, but after reading and being a Flatiron student I'm here to give a better understanding with communicating with the server. A built-in JavaScript method that is very important to learn, that method is Fetch.
Fetch is a built-in JavaScript method that will retrieve a promise from an API that later can be used as an JSON object. Once you have that data you will be able to use the data depending on its usage.
Step 1
"Fetch()" takes one argument and that's the api path you want to fetch. Here we are using a API that will gives random cat facts. It will look something like this:
what we are doing here is basically using the url as an argument for fetch and what we are receiving back is a promise. To see if we are getting a promise back we "console.log()" the the "fetch()".
Step 2
Once we have a promise we have to resolve this into to response to then later turn into an JSON object. But right now we have to resolve the promise and we are going to use a promise method which is ".then()". The method ".then" takes in an argument response. Now let's make sure we are getting a response back. We could make sure we are getting a response back by doing another on "console.log".
Now that we have a response object we won't be able to use it the way we want it to because it isn't a "JSON" object since we are working with JSON data. Now we are going to use a method which converts it to an "JSON" object and that's ".json()" .
Now that we have finished using ".json()" let's not forget this will give us another promise so we are not finished yet.
Step 3
After receiving another promise let us finally use that data by using another ".then" and this specific ".then" it will take an argument of data that we want to use.
Let's make sure we getting the data back by using a "console.log"
Now you are able to use what you are working with.
Step 4
There's one more step we have to complete using the ".catch" method. By using this method javascript will be able to catch an error incase if the server fails to give us data or we aren't getting a promise, etc. Also ".catch" takes an argument which would be the error. We could "console.log" the error or we add an alert to let the user know about the error.
As you can see I ruined the API path so I got an alert using ".catch()"
If we want to catch the error and know where this error is coming from we could use .ok to show us if the response is the error. We will use an if statement to "console.log('working')" if the response meets the condition, but we also add an else to "console.log" a message saying "no working" if the response is not working.
More Info On Fetch
Now that you have an idea on how fetch works, let's say you want to post data, patch data and delete data, then fetch is going to take another argument which will have us doing a few things to set up for the method we want to use. First we need to pass in an HTTP method that we are going to use. In this case we are using our own "API" and we are going to use the "POST" method. Let's not forget our data base has no data.
Now we need to pass the body in order to "POST" what we want inside the body. The value for the body is "name: bob". After knowing what we want to post we need to "json.stringify" the object that we pass for the body.
This step on the upcoming steps are needed because without these steps, whatever you want to post will not appear on the data. Next we are going to add a headers, this is telling Fetch that we are passing "JSON". For the value we are going to pass an object and inside the Object we are going to add "Content-Type": "application/json". After following these setups we are going to see what we wanted to post on our data that we are using.
Hope this short summary of "Fetch" was very useful, until next time.
Top comments (0)