As a new developer starting out to learn many new things, a major part of it may require API Handling.
If you have watched, many videos on making projects or requirements on getting a developer job, you might have heard them saying to create a website that makes a request to some API.
So, API Handling basically means that you make a request to a web server and the server returns the data that you require from it, that's it.
Making a request to a web server, it also called hitting the 'api endpoint' this is the link that you make a request to in order to get data from it.
There are quite a few ways that you could do this using JavaScript. At this point, we will learn about a method called Fetch api. This is going to be an easier way to make calls to an API.
So, let's get into it.
We will be using the JSON Placeholder which is an API that has some random users values and todo values that we can use in order to learn about Fetch api.
Basically, this JSON placeholder API will have all the data from it's web server and it will have an endpoint that will help us get the data that we need. We can think of an endpoint as an addition to the endpoint(which is the URL of the API). You will be able to understand once you have done the sample project here.
In order to fetch the data, we will first use a fetch function that helps us to make a request to the API.
fetch("https://jsonplaceholder.typicode.com/todos")
The URL that we have now put into the fetch function will have the data in JSON format so that we can fetch the data and use it. This API will give an array of todos. As this gives an array of many todos, we can have another value in order to get only a specific todo.
fetch("https://jsonplaceholder.typicode.com/todos/1")
This API will now only give the 1st Todo.
The fetch function returns a promise. Until now the function does not return anything. So we take the callback(which is the data being returned).
fetch("https://jsonplaceholder.typicode.com/todos")
.then(response => {
response.json()
}).then(data => {
console.log(data)
})
This will get the response and This is taken in the JSON format because this is the format of data that we are receiving.
However, the name response can be changed to anything you want to call it. Ideally, it the response that we receive but can be changed.
Now we will have to handle errors. Luckily, there is already a method called .catch to handle errors in case the API call is not successful.
fetch("https://jsonplaceholder.typicode.com/todos")
.then(response => {
response.json()
})
.then(data => {
console.log(data)
})
.catch(error => {
console.log("error while making API call")
})
This will be the output of this snippet of code to fetch data.
Object {
completed: false,
id: 1,
title: "delectus aut autem",
userId: 1
}
Through this it is less likely that you need to handle certain error codes, but this will make it easier to handle basic errors during API call.
This is the basics of and how to use Fetch api in Javascript. You can use this simple snippet of code to make calls to any API endpoint.
Some APIs will require you to have an API key, so in that case you need to do the necessary steps to get an API key (they will have a documentation on it usually or any way to let you know about how to create an API key) and then you could add it to the URL in the way shown below.
{apiURl}?apiKey="{apikey}"
This is it. It took a lot of time to make this blog. I hope you enjoyed and found this helpful. Please do leave a like and comment if you have any feedbacks or comments. Thank you for reading this blog post and I will see you in my next blog post.
👍 Leave a like if you like it 💭 Leave a comment or feedback that you have Also share this with anyone who you think might find it helpful.