Home > software_development > Fetch Data with JavaScript Fetch API and Perform other HTTP Requests.

Fetch Data with JavaScript Fetch API and Perform other HTTP Requests.

Learn JavaScript Fetch API basics, techniques, and best practices for frontend development. 

By :Thomas Inyang🕒 1 Oct 2024

JavaScript fetch

As a frontend developer, fetching data in frontend development is a required skill set for creating dynamic and responsive web applications. So, if you are new to frontend development or a frontend developer who hasn't used JavaScript Fetch API before, then this post is for you.

In this post you will learn the following:

  1. What the JavaScript Fetch API is and how it works.
  2. Get data from free Application Programming Interfaces (APIs) using the JavaScript Fetch API.
  3. Display the fetched data on your web page and cache data.
  4. Handling errors properly, if any.

Prerequisite

  1. Internet Connection
  2. Knowledge of HTML DOM: createElement and appendElement.

What is the JavaScript Fetch API and How Does It Work?

The JavaScript fetch API fetch() is a modern method that replaces XMLHTTPRequest due to its robust nature and flexibility.

getRequest


The fetch() method can make asynchronous requests to servers to GET, POST, and perform other HTTP request methods on any API endpoint URL. The GET request returns a fetched response object (data or server error), the data will then be processed further to display dynamic content on your frontend. Let's see the Javascript fetch() method syntax.

JavaScript Fetch API Syntax and Options.

Since fetching API data is promise-based, it is important you know the fetch() method syntax for effective API integration.

In this guide, you will use the async/await method to fetch API data.

async function getData(){
const sampleUrl = 'https://api.example.com/data'

try{
const response = await fetch(sampleUrl)
if (!response.ok) {
console.log(`Response status: ${response.status}`);
}
const json = await response.json();
console.log(json);
}catch (error) {
console.error(error.message);
}

}

In this code,

  1. An asynchronous function is created, async function getData().
  2. The API endpoint URL is declared as sampleUrl.
  3. try{} catch{} is used to try out the fetch() method which takes in the sampleUrl as an argument, stores the response "const response", parses the stored response as JSON data, and catches errors if any.


The fetch() method can also be used with Cross-Origin Resource Sharing (CORS). However, there could be CORS issues when making requests to certain API endpoints Url. To handle the issues, make sure the API you intend to access has the right CORS headers. During development, set your development server to use proxies that allow cross-origin requests.


Now that you have known what JavaScript Fetch API fetch() is and how it works. It is time to fetch some actual data.

How to Make a GET Request Using the Fetch API

In this section, you will use the fetch() method to make GET requests to the "JSONPlaceholder" API endpoint, and display the data in your frontend using HTML, CSS, and Javascript.

(async function getData(){
const sampleUrl = 'https://jsonplaceholder.typicode.com/posts'

try{
const response = await fetch(sampleUrl)
if (!response.ok) {
console.log(`Response status: ${response.status}`);
}
const json = await response.json();
console.log("data:",json);
}catch (error) {
console.error(error.message);
}

}()

In this JavaScript fetch API example,

  1. you created an IIEF (self-executing function) that sends a GET request to JSONPlaceholder API to fetch its blog post data.
  2. It checks if the response is not ok and throws and error, If the response is ok, it parses the response as JSON data which can be seen in the console of your browser (Right click and select inspect, at the top right of the opened panel click on console to see the fetched data or error message).


You can now display the returned data using HTML.

Create an "index.html' file and enter this code:

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>My First Webpage</title>

</head>

<body>
<article id="card">
</article>

<script>
(async function function getData() {
try {
let raw = await fetch("https://jsonplaceholder.typicode.com/posts")
let res = await raw.json()
let slicedData = res.slice(0, 10)
const postsContainer = document.getElementById('card');
slicedData?.forEach(post => {
const postElement = document.createElement('div');
postElement.innerHTML = `<h3>Title: ${post.title}</h3><p>${post.body}</p>`;
postsContainer.appendChild(postElement);
});
} catch (error) {
console.log(error);
}
})()
</script>

</body>
</html>

In this code , the JSON data is retrieved, parsed, and integrated into the frontend.

  1. The post data returned is 100 and you wouldn't want to display all 100 posts, then, let slicedData = res.slice(0, 10) is used to get the first 10 posts (you can increase or decrease the posts) of the 100 posts.
  2. forEach is used to iterate each post of slicedData and creates a div element that contains an h3 element–post title and p element–the body of a post title which are then appended into the created div element.
  3. catch(error){console.log(error)} catches any error and logs it in the web console during the GET Request.

In your text editor (VSCode), install an extension, live server – this will start the HTML file and reload it on every SAVE. Click on "GO live " at the bottom right of your code editor to run the local server.


Before you style the displayed data, you need to fetch the data once and store it in the browser localStorage. This will prevent multiple GET requests on every file saved.

<script>
(async function getData() {

try {
let storedData = localStorage.getItem("stored");

if (storedData) {
let displayData = JSON.parse(storedData)
const postsContainer = document.getElementById('card');
displayData?.forEach(post => {
const postElement = document.createElement('div');
postElement.innerHTML = `<h3>Title: ${post.title}</h3><p>${post.body}</p>`;
postsContainer.appendChild(postElement);
});

} else {
let raw = await fetch("https://jsonplaceholder.typicode.com/posts")

let res = await raw.json()
let slicedData = res.slice(0, 10)
const myJSON = JSON.stringify(slicedData);
localStorage.setItem("stored", myJSON);
const postsContainer = document.getElementById('card');
slicedData?.forEach(post => {
const postElement = document.createElement('div');
postElement.innerHTML = `<h3>Title: ${post.title}</h3><p>${post.body}</p>`;
postsContainer.appendChild(postElement);
});
}

} catch (error) {
console.log(error);
}
})()
</script>

In this code, an amendment is made by implementing an if-else condition.

  1. The if code block checks if there is stored data in the localStorage – let storedData = localStorage.getItem("stored").
  2. If there is none, the else code block triggers the GET Request, slices the post data (10), stringify the sliced data const myJSON = JSON.stringify(slicedData), before storing it in the localStorage – localStorage.setItem("stored", myJSON);


You can now style the post card.

Create a CSS file (styles.css) in the project root directory.

*{
padding: 0;
margin: 0;
}
#card{
width: 60%;
padding: 16px;
background-color: white;
}
h3{
margin: 20px 0px 10px;
}
p{
font-size: 16px;
line-height: 20px;
color: brown;
}

In this CSS file,

  1. The browser root margin and padding are set to 0px.
  2. #card id has the following style properties, width, padding, and background-color.
  3. h3 (The post title) is styled to have a top-margin 20px, left and right-margin as 0px, and bottom-margin as 10px.
  4. p (The title post body) is styled to have its text content as the following, font-size, line-height, and color.

The fetch() method also performs POST Requests.

See also: How to use Javascript event in HTML

Make POST Requests with Fetch API

The Fetch API can also handle POST requests, it enables you to send data to an API. This is useful for submitting form data, creating new resources, or updating existing ones.

Don't forget to structure the request body correctly and set the appropriate headers

When sending JSON data in a POST request.

const newPost = {
title: 'My New Title ',
body: This is a new post,
userId: 1
};

try{
let postRes = fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(newPost)
})
let response = postRes.json()
if(response){
console.log('Success:', response)
}

}catch (error){
console.error('Error:', error)
}

In this example:

  1. The Fetch options, POST is the request method and the headers specify the Content-Type as application/json.
  2. The body contains the JSON data to be sent, which is stringified using JSON.stringify().

Using this method ensures that the data is correctly transmitted to the API endpoint.

What Are the Best Practices for Error Handling with Fetch?

To ensure smooth user experience and debug issues efficiently, you need to handle errors correctly. Here are some best practices:


Check Response Status:

Always check if the response is successful before processing the data.

const response = await fetch('https://jsonplaceholder.typicode.com/posts');
if (!response.ok) {
throw new Error('Network response was not ok');


Use try...catch with async/await to catch Network Errors that occur during the fetch operation.

async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Fetch error:', error);
}
}

Knowing the above enables you to ensure smooth user experience.

What are HTTP Errors?

An HTTP error can either be from the server-side, client-side or both. This error is designed as a request code with a follow up message.

4xx Errors are Client-Side based: They Indicate issues with the request, such as invalid parameters or unauthorized access.

5xx Errors are Server-Side based: They suggest problems with the server handling the request.

To enhance your users' experience, you should design your error message and how it can be recovered accordingly.

Conclusion

The JavaScript Fetch API is an essential tool for modern frontend development, it enables you to fetch and send data efficiently and seamlessly via an API endpoint URL. With this tool you can build a dynamic and responsive web and implement a robust error handling mechanism.


Displaying fetched data in HTML is one basic skill set a developer should have, because this is the basics of frontend development before migrating to frontend development libraries and frameworks.


Apply what you've learned by building projects that incorporate multiple APIs, demonstrating your proficiency in fetching data with JavaScript, look out for error codes and messages and handle them correctly because it gives the users’ a smooth experience. Also, you can check out other free API for more experiments.


If you find this post interesting, PLEASE SHARE.

You may also like