Working with APIs

What is an API, and How Do We Interact with It?

In web development, APIs enable your JavaScript code to interact with external services, such as fetching data from a server, submitting form data, or integrating third-party services.

In modern JavaScript applications, APIs are often used to:

• Fetch data from a server (e.g., retrieving weather data, news articles, or product details);
• Send data to a server (e.g., submitting a form or saving user preferences);
• Work with third-party services (e.g., Google Maps, Twitter API, payment gateways).

We interact with APIs by sending HTTP requests to an API endpoint, and the server responds with data, typically in JSON format.

Sending HTTP Requests Using fetch()

The fetch() function is a modern way to make network requests in JavaScript. It returns a Promise, which resolves when the request completes.

This example illustrates making an HTTP GET request to an API using fetch(). The fetchData function sends a request to the specified endpoint (https://jsonplaceholder.typicode.com/posts/1). Once the response is received, response.json() parses the JSON data. The post's title is then extracted from the parsed data and displayed in the HTML paragraph.

Handling API Responses: Parsing JSON and Checking Response Status

After sending an API request, it’s important to check whether the request was successful and handle the response properly. In most cases, the data returned by an API is in JSON format, so you need to parse it using response.json().

Additionally, you should always check the response status to ensure the request was successful (status code 200–299).

This example demonstrates handling the response status of an API request. The fetchAndCheckStatus function sends a request to an API endpoint, then checks if the response is successful using response.ok, which returns true for status codes in the 200–299 range. If the request is successful, the JSON data is parsed and displayed. If the request fails, the error status code is shown in the HTML.

Error Handling with APIs and Dealing with Network Failures

When working with APIs, it’s crucial to handle potential errors such as:

• Network failures: The server might be unreachable due to network issues;
• Invalid responses: The API might return an error (e.g., 404 Not Found or 500 Server Error).

You can handle errors by using try...catch along with fetch() to manage both network errors and API response errors.

This example shows how to handle API errors effectively. The fetchWithErrorHandling function uses try...catch to manage both network errors and invalid API responses. If the request to the invalid URL fails, or if the response status code is outside the 200–299 range, an error is thrown with a specific message. The catch block then displays the error message in the HTML. This method ensures that any issues with the API call, such as a bad endpoint or connectivity issues, are managed gracefully and communicated clearly to the user.