Fetch API: A simple guide

Photo by Douglas Lopes on Unsplash

Introduction

This tutorial provides an introduction to using the Fetch API for making HTTP requests in JavaScript. It covers the basics of how to make GET and POST requests, how to handle the response, and how to use different options available in the Fetch API. By the end of this tutorial, you should have a good understanding of how to use the Fetch API to retrieve and send data from web APIs.

Fetch API

Fetch API is a modern JavaScript interface for pulling resources such as JSON, Images and texts from a server through an API. The Fetch method is available in all modern browsers such as Chrome, Firefox, Safari etc and provides a simpler way of accessing and manipulating requests and responses.

Before the Fetch API, developers used XMLHttpRequest (XHR) to send and receive data from servers. XHR is still widely used but has limitations such as verbose syntax and the need to configure it for every request. Fetch API was introduced to address these limitations and provide a cleaner, fast, consistent and easy way of fetching data from servers.

Basic Fetch request

The easiest form of a Fetch request takes just one argument, the API endpoint of the resource you want to fetch. Here's an example:

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

This code sends a GET request (an HTTP method used for requesting data for a specified resource) to the specified API endpoint and returns the response in JSON format. The second .then() block extracts the JSON data from the response and logs it to the console.

In this example, we used the fetch() method to send a GET request to the endpoint https://api.example.com/data. The fetch() method returns a Promise that resolves to the response object representing the response from the server.

We then use the json() method of the response object to parse the response as JSON. This method also returns a Promise that resolves to the parsed JSON data.

We use the then() and catch() methods of the Promise object to handle the success and error cases respectively.

Adding options to the Fetch request

To customize a Fetch request, you can include various options in the second argument, such as specifying the request method, defining headers, and providing a request body. An example of this could be setting specific options to tailor the Fetch request to your desired configuration.

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  })
})
.then(response => response.json())
.then(data => console.log(data))

This code sends a POST request to the specified endpoint with the given headers and body. The second .then() block extracts the JSON data from the response and logs it to the console.

Handling errors

When making a fetch request, there may be instances where the request fails due to issues like network errors or server errors. To manage these errors, it is possible to add a .catch() block following the .then() block. Essentially, this allows you to handle any errors that occur during the fetch request and respond accordingly. An example of this in action could be implementing alternative functionality or displaying an error message to the user.

fetch('https://jsonplaceholder.typicode.com/404')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok')
    }
    return response.json()
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error))

This code sends a GET request to a non-existent endpoint, which returns a 404 status code. The first .then() block checks if the response was successful using the response.ok property, and throws an error if it was not. The .catch() block handles the error and logs it to the console.

Using async/await

An alternative way to make Fetch requests is by using async/await syntax. It can simplify the code and make it easier to read and understand. Here is an example of how this syntax can be used to make Fetch requests.

async function fetchData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1')
    const data = await response.json()
    console.log(data)
  } catch (error) {
    console.error('Error:', error)
  }
}
fetchData()

This code defines an async function that makes a Fetch request and extracts the JSON data from the response using await. The try/catch block handles errors in the same way as the previous example.

Conclusion

The Fetch API is a powerful tool for making HTTP requests in JavaScript. It provides a simple, flexible and easy-to-use interface for retrieving and sending data from web APIs. Whether you're building a web application, a mobile app or a server-side script, the Fetch API can help you communicate with web APIs in a more efficient and effective way. By following the examples and guidelines provided in this tutorial, you should be well-equipped to start using the Fetch API in your own projects and make the most of its features.