Using Fetch API for HTTP Requests

Photo by shraga kopstein on Unsplash

Using Fetch API for HTTP Requests

The Fetch API provides a powerful and easy-to-use tool to make HTTP requests in JavaScript. It is a modern interface that allows you to make HTTP requests to servers from web browsers. This tutorial will guide you through the basics of using the Fetch API to send various types of HTTP requests such as GET, POST, PUT, and DELETE.

Understanding the Fetch API

The Fetch API is a promise-based JavaScript API for making asynchronous HTTP requests in the browser, similar to XMLHttpRequest (XHR). Unlike XHR, it is designed to be more flexible and efficient.

Basic Syntax of Fetch API

To start using the Fetch API, you simply call the fetch() function, passing it the URL of the resource you want to fetch. The function returns a promise that resolves to the Response object representing the response of the request.

Copyable Code Example

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));


Handling JSON Data
One common use case of the Fetch API is to request and work with JSON data from a server. The json() method of the Response object is used to parse the response body as JSON.

GET Requests
To make a GET request, you simply call the fetch() function with the URL. This is the most basic and common type of HTTP request, used to retrieve data from a server.

POST Requests
POST requests are used to send data to a server to create/update a resource. The data sent to the server is stored in the body of the request. The body of the HTTP message sent to the server is similar to the format of the query string, with name/value pairs.


fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'John Doe',
    job: 'Content Writer'
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));


Error Handling
Error handling in fetch is slightly different from traditional XHR. A fetch promise will only reject on network failure or if anything prevented the request from completing. This means that it will not reject on HTTP errors like 404 or 500. Instead, these are handled by checking the ok property of the response object.

Conclusion
The Fetch API is a modern, powerful, and flexible approach to handle HTTP requests in JavaScript. It provides a more powerful and flexible feature set than the older XMLHttpRequest. By understanding and utilizing promises provided by the Fetch API, developers can write cleaner, more robust code to interact with APIs or perform other networking tasks.