Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use JavaScript Fetch API to Get Data?
Nowadays, JavaScript is useful for writing frontend and backend code. Also, it is the most widely used programming language.
Furthermore, we need to get the data from other servers while developing real-time applications. We can fetch data from other servers or databases using the API, which stands for the application programming interface.
Here, we will learn various methods to fetch API to get data using JavaScript.
Use the fetch() method
The fetch() is a browser’s method to get the data from the API. It takes the API URL as the first parameter we need to get data and options as a second parameter. The options can contain headers and authentication tokens.
Syntax
Users can use the syntax below to fetch() to get data.
fetch(baseURL)
.then(data => {
// use data here
}
In the above syntax, baseURL is an API to get data.
Example 1
In the example below, When a user clicks the button, it executes the fetchData() function. Inside the fetchData() function, we have used the fetch() method to fetch data from API. After that, we handled the response and error. Users can see the data we fetched from the API in the output.
<html>
<body>
<h2>Using the <i> fetch() browser method </i> to fetch data from API</h2>
<div id = "output"> </div>
<button onclick = "fetchData()"> Fetch API to get data </button>
<script>
let output = document.getElementById('output');
function fetchData() {
fetch('https://dummyjson.com/products/1')
.then(response => response.json())
.then(data => {
output.innerHTML += "id = " + data.id + "<br/>";
output.innerHTML += "brand = " + data.brand + "<br/>";
output.innerHTML += "category = " + data.category + "<br/>";
output.innerHTML += "price = " + data.price + "<br/>";
output.innerHTML += "rating = " + data.rating + "<br/>";
output.innerHTML += "stock = " + data.stock + "<br/>";
})
}
</script>
</body>
</html>
Use the axios npm package
The axios is an NPM package that allows developers to interact with the API by making the GET, POST, PUT, etc. requests. Here, we will use the axios to make a GET request to get data in JavaScript.
Syntax
Users can follow the syntax below to use the axios to get data from the API.
axios.get(URL)
.then((response) => {
// use response
}
In the above syntax, we have used the axios.get() method to fetch data from the API.
Example 2
In this example, We are resolving the promise using the then()and catch() blocks we get from the server or database. We have utilized the data in the then() block and the error in the catch() block.
<html>
<head>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.3/axios.min.js"></script>
</head>
<body>
<h2>Using the <i> Axios NPM package </i> to fetch data from API</h2>
<div id = "output"> </div>
<button onclick = "fetchData()"> Fetch data using Axios </button>
<script>
let output = document.getElementById('output');
function fetchData() {
axios.get("https://jsonplaceholder.typicode.com/todos/1")
.then((response) => {
output.innerHTML += "userId : " + response.data.userId + "<br/>";
output.innerHTML += "id : " + response.data.id + "<br/>";
output.innerHTML += "title : " + response.data.title + "<br/>";
output.innerHTML += "completed : " + response.data.completed + "<br/>";
})
.catch((err) => {
output.innerHTML += "The error is - " + err + "<br/>";
})
}
</script>
</body>
</html>
Example 3
In the example below, we have used the axios to fetch data with async/await syntax. We have made the getData() function asynchronous. Also, we have used the await keyword with the axios to suspend the execution of the function until we get a response from the API.
<html>
<head>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.3/axios.min.js"></script>
</head>
<body>
<h2>Using the <i> Axios NPM package </i> with Async/await syntax to fetch data from API</h2>
<div id = "output"> </div>
<button onclick = "getData()"> get data using Axios </button>
<script>
let output = document.getElementById('output');
async function getData() {
let response = await
axios.get("https://jsonplaceholder.typicode.com/todos/1")
for (let key in response.data) {
output.innerHTML += key + " - " + response.data[key] + "<br/>";
}
}
</script>
</body>
</html>
Using the XMLHttpRequest web API
The XMLHttpRequest web API allows us to create our module to fetch the data. We can create an object and initialize it with the XMLHttpRequest. After that, we can use that object to open a GET request.
After that, we can invoke a callback function when XMLHttpRequest loads. The callback function can get the response status and return a response or error accordingly.
Syntax
const xmlRequest = new XMLHttpRequest();
xmlRequest.open('GET', apiURL);
xmlRequest.responseType = 'json';
xmlRequest.onload = function () {
// handle the response from API
}
xmlRequest.send();
In the above syntax, we first used the open() method to open a request, and we are handling the response from API using the onload event.
Example 4
In the example below, we have to use the XMLHttpRequest() web API to create a custom module to fetch data from the API. The customRequest() function contains the custom module.
After that, we invoked the customRequest() function by passing the URL as a parameter and used the then() block to resolve the promise returned from the customRequest() function.
<html>
<body>
<h2>Using the <i> XMLHttpRequest web API </i> to fetch data from API</h2>
<div id = "output"> </div>
<button onclick = "getData()"> get data </button>
<script>
let output = document.getElementById('output');
const customRequest = (apiURL) => {
return new Promise((res, rej) => {
// Create a new Object of XMLHttpRequest
const xmlRequest = new XMLHttpRequest();
// open a get request
xmlRequest.open('GET', apiURL);
// set response type
xmlRequest.responseType = 'json';
xmlRequest.onload = function () {
// resolve the promise when we get a successful response
if (xmlRequest.status == 200) {
res(xmlRequest.response);
} else {
// reject promise on error
rej(xmlRequest.response);
}
};
// send request
xmlRequest.send();
});
};
// making the get request from URL
const getData = async () => {
try {
const data = await customRequest(
'https://dummyjson.com/products/1',
);
output.innerHTML += "category = " + data.category + "<br/>";
output.innerHTML += "price = " + data.price + "<br/>";
output.innerHTML += "rating = " + data.rating + "<br/>";
output.innerHTML += "stock = " + data.stock + "<br/>";
} catch (err) {
output.innerHTML += "The error is : " + err + "<br/>";
}
};
</script>
</body>
</html>
We learned three different ways to fetch data from API. The best way is using the fetch() browser’s method, as we don’t need to install any module to use it. Also, users should use all modules with the async/await syntax.
17K+ Views
