API Call in JavaScript Using the fetch() method
fetch is a method to call an API in JavaScript. It is used to fetch resources from a server. All modern browsers support the fetch method. It is much easy and simple to use as compared to XMLHttpRequest.
It returns a promise, which contains a single value, either response data or an error. fetch() method fetches resources in an asynchronous manner.
Example: In this example, fetch() is used to make an API call.
Javascript
fetch( 'Api_address' ) .then(response => { if (response.ok) { return response.json(); // Parse the response data as JSON } else { throw new Error( 'API request failed' ); } }) .then(data => { // Process the response data here console.log(data); // Example: Logging the data to the console }) . catch (error => { // Handle any errors here console.error(error); // Example: Logging the error to the console }); |
Explanation of the above code
Step A: Make an API request to the URL endpoint.
Pass the API URL to the fetch() method to request the API which will return the Promise.
fetch('Api_address')
Step B: Handle the response and parse the data.
Use the .then() method to handle the response. Since the response object has multiple properties and methods to access data, use the appropriate method to parse the data. If the API return JSON data, then use .then() method.
.then(response => {
if (response.ok) {
return response.json(); // Parse the response data as JSON
} else {
throw new Error('API request failed');
}
})
Step C: Handle the parsed data
Make another .then() method to handle the parsed data. Inside that, you can use that data according to your need.
.then(data => {
// Process the response data here
console.log(data); // Example: Logging the data to the console
})
Step D: Handle the Error
To handle errors, use .catch() method at the end of the change.
.catch(error => {
// Handle any errors here
console.error(error); // Example: Logging the error to the console
});
4 Ways to Make an API Call in JavaScript
API(Application Programming Interface) is a set of protocols, rules, and tools that allow different software applications to access allowed functionalities, and data, and interact with each other. API is a service created for user applications that request data or some functionality from servers.
To give specific access to our system to other applications that may be useful to them, developers create APIs and give them endpoints to interact and access the server data. While working with JavaScript it is common to interact with APIs to fetch data or send requests to the server.
4 Ways to Make an API Call in JavaScript:
Table of Content
- API Call in JavaScript Using XMLHttpRequest
- API Call in JavaScript Using the fetch() method
- API call in JavaScript using Axios
- API call in JavaScript Using the jQuery AJAX