How to use the Fetch API to send and implement GET requests in JavaScript
The Fetch API is a powerful tool for communicating with external API and implementing them into your code.
The fetch() method takes one mandatory parameter, which is the path to resource you would like to retrieve data from. It returns a promise equivalent to the server’s response to that request.
You can optionally pass in an object as the second argument that represents a resource request — we’ll get into that some other time.
This is an example of fetch() syntax:
const fetchExample = fetch(resource, {init})resource in this example would be the URL of the resource you are accessing.
init is the optional object that would contain some additional configuration for our request.
The default behaviour of fetch() sends a GET method to an API
fetch('https://jsonplaceholder.typicode.com/todos/5')
.then((response) => response.json())
.then((json) => console.log(json));The first line fetch( ‘https://jsonplaceholder.typicode.com/todos/5') is the URL to the API — in this example if you copy this into your browser’s address bar, it returns the following.
{ "userId": 1, "id": 1, "title": "laboriosam mollitia et enim quasi adipisci quia provident illum", "completed": false }
The next line, .then((response) => response.json()), takes the response which is aptly named in this example: response and returns it into the function response.json()
This parses the JSON object into an object we can work with in JavaScript.
So — from fetch('https://jsonplaceholder.typicode.com/todos/1')
We receive the data:
{ "userId": 1, "id": 1, "title": "laboriosam mollitia et enim quasi adipisci quia provident illum", "completed": false } ,
Then that data is parsed into the built in json() method — which returns:
{ userId: 1, id: 1, title: laboriosam mollitia et enim quasi adipisci quia provident illum, completed: false }
Great! A JavaScript object!
Notice here that the difference between these two objects is that the one retrieved from the URL uses strings — which confuses JavaScript, so we parse it into our .json() method. This returns a JavaScript object which we can then use in other functions.
The last line, .then((json) => console.log(json)); takes the new JavaScript object — which I named json — and logs it to the console. Try it out!
What can we do with this object we retrieved? All it does so far is send it to the console.
We can put our get request into a new function and introduce a callback as it’s parameter!
Take this example:
function getData(callback) =
{
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then((response) => response.json())
.then((json) => callback(json));
}If we are to make a function that makes use of this API’s data we retrieves, all we have to do now is call our getData with the function that uses the data as it’s parameter.
function getData(callback) =
{
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then((response) => response.json())
.then((json) => callback(json));
}function printData(data) =
{
console.log(data);
}getData(printData);
By using a callback parameter in our fetch request function, we can easily pass the data into other functions by using them as a parameter. In the example above, calling getData(printData) :
- Retrieves the data from the API
fetch('https://jsonplaceholder.typicode.com/todos/1') ;2. Parses the data into a JavaScript object we can use in our code. response is just a variable name I chose to keep things simple.
.then((response) => response.json()) ;3. Sends the data as a parameter in our callback function. Again, json is a variable name.
.then((json) => callback(json));
Summary
In this article, we learned how to create and send a GET request to an external API using Fetch and discovered how simple a basic fetch request can be. Experiment with it! Maybe my next topic will be on using Fetch to send POST, PATCH, and DELETE requests.
I hope you enjoyed my first article! Make sure to leave a comment if anything is unclear and HAPPY CODING!!!!
