---
title: "How to fetch data from API using HTML Fetch API"
description: "To perform a basic fetch request, you can use the fetch function, which returns a promise that resolves to the response object."
author: "Ashutosh Patel"
published: 2024-06-11
updated: 2024-06-11
canonical: https://www.mindstick.com/articles/336072/how-to-fetch-data-from-api-using-html-fetch-api
category: "html"
tags: ["javascript", "api(s)", "html5"]
reading_time: 3 minutes
---
# How to fetch data from API using HTML Fetch API
### HTML Fetch API
The Fetch API is a modern interface that allows you to make [HTTP requests](https://www.mindstick.com/forum/23192/using-java-dot-net-urlconnection-to-fire-and-handle-http-requests) from [web pages](https://answers.mindstick.com/qa/35620/how-would-you-change-the-format-of-all-the-phone-numbers-in-10-000-static-html-web-pages) to servers.
Here is a basic [guidelines](https://www.mindstick.com/news/2256/government-issues-guidelines-for-social-media-appeals-committees) for using the Fetch API,
**Making a GET request**\
You can use a simple GET request to retrieve [data from the server](https://www.mindstick.com/forum/156656/fetch-the-json-data-from-the-server-through-jquery)
**[JavaScript](https://www.mindstick.com/forum/12869/how-to-c-sharp-and-javascript-email-validation-regex)**
```javascript
```
**Basic Usage**\
To make a basic `fetch`request, you can use the **fetch** function, which returns a **promise** that **resolves** to the response object representing the network response.\
## Example-
```html
HTML Graphics Example
Fetch data from API using HTML Fetch API
```
## In the above example-
- The **createCard** function creates a new card element, formats its contents with [template literals](https://www.mindstick.com/forum/160787/what-are-template-literals-in-javascript-and-how-do-you-use-them), and returns the card element.
- **fetch** call Fetches data from the **API**.
- The **forEach** loop iterates over the **data**, creating a card for each record using the **createCard** function, and appending it to the `#card-parent` container using **appendChild**.
\
This option ensures that each card has the **id,** **title,** and **body** information properly populated from the **[API response](https://answers.mindstick.com/blog/301/implement-a-common-api-response-structure-in-asp-dot-net-core)**, and that each card is associated with the object.
**Output-**\
In this article, discussed the basic [implementation](https://yourviews.mindstick.com/view/60537/nationalwide-nrc-implementation-bjp-looting-congress-s-idea) details of the **Fetch API**. Once you understand these, you can handle most of the common tasks involved in making **HTTP requests** in your [web applications](https://www.mindstick.com/blog/11464/improve-your-understanding-of-web-applications).
**Also, Read:** [HTML Graphics using HTML](https://www.mindstick.com/articles/336067/html-graphics-using-html)
---
Original Source: https://www.mindstick.com/articles/336072/how-to-fetch-data-from-api-using-html-fetch-api
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.