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.

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
  });

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: