The Fetch API in JavaScript provides a modern way to make network requests that are simpler and cleaner compared to older methods like XMLHttpRequest. This tutorial walks you through using the Fetch API to create both GET and POST requests.

Introduction

Previously, XMLHttpRequest was the go-to for API requests, but it lacked a clean and intuitive approach. The Fetch API introduces a more manageable syntax using Promises, allowing for more readable and maintainable code.

Prerequisites

To follow this tutorial, you should have:

• A Node.js development environment set up.
• Basic knowledge of JavaScript.
• Understanding of Promises in JavaScript.

Step 1 — Getting Started with Fetch API Syntax

The Fetch API can be initiated using the fetch() function with the API URL as the argument. The method returns a Promise, which can be used to handle the response.

Here’s how you make a request:

fetch(url)  .then(response => {    // handle the response  })  .catch(error => {    // handle the error  });

The then() method deals with successful responses, while the catch() method handles errors.

Step 2 — Using Fetch to Get Data from an API

This step uses the JSONPlaceholder API to fetch and display a list of users.

First, set up your HTML structure:

<h1>Authors</h1><ul id="authors"></ul>

Then, create a script where you will use fetch to retrieve data:

const ul = document.getElementById('authors');const url = 'https://jsonplaceholder.typicode.com/users';fetch(url)  .then(response => response.json())  .then(data => {    data.forEach(author => {      const li = document.createElement('li');      li.innerHTML = `${author.name} (${author.email})`;      ul.appendChild(li);    });  })  .catch(error => console.log(error));

Step 3 — Handling POST Requests

To perform a POST request, you need to specify additional settings in your fetch method.

Here’s how to create a new user:

const url = 'https://jsonplaceholder.typicode.com/users';const data = { name: 'Sammy' };const fetchData = {  method: 'POST',  body: JSON.stringify(data),  headers: {    'Content-Type': 'application/json; charset=UTF-8',  },};fetch(url, fetchData)  .then(response => response.json())  .then(json => console.log(json))  .catch(error => console.log(error));

Comparison with Axios and Framework Integrations

While the Fetch API is built into JavaScript and offers a minimalist approach, libraries like Axios provide a richer feature set (e.g., interceptors and automatic JSON parsing). Frameworks such as React, Vue.js, and Angular often have their methods of integrating HTTP requests which may leverage Fetch or Axios internally.

Using Fetch API in JavaScript Frameworks

React Example

In React, you typically call the Fetch API inside the useEffect hook:

useEffect(() => {  fetch('https://api.example.com/data')    .then(response => response.json())    .then(data => setData(data))    .catch(error => console.error('Error fetching:', error));}, []);

Vue.js Example

In Vue.js, the Fetch API can be called in the mounted() lifecycle hook:

mounted() {  fetch('https://api.example.com/data')    .then(response => response.json())    .then(data => {      this.data = data;    })    .catch(error => console.error('Error fetching:', error));}

Angular Example

In Angular, you might call the Fetch API inside a service or within a component:

ngOnInit() {  fetch('https://api.example.com/data')    .then(response => response.json())    .then(data => {      this.data = data;    })    .catch(error => console.error('Error fetching:', error));}

FAQs

1. What does Fetch API do in JavaScript?

   • It allows you to make network requests to servers to fetch resources like JSON, HTML, images, etc.

2. What is an example of Fetch API?

   • A basic example would be fetching a JSON object using fetch(url).then(response => response.json()).

3. How to handle JSON data?

   • After fetching data, use .json() to parse and then utilize the data in your application.

4. What’s the difference between REST API and Fetch API?

   • REST API is a set of rules for using the web, while Fetch API is a JavaScript interface that allows you to interact with a REST API or other resources.

Conclusion

The Fetch API is a powerful tool for making HTTP requests in JavaScript, providing a modern and clean interface for managing network interactions. Whether you’re building simple or complex applications, mastering the Fetch API can enhance your coding efficiency and project performance.

Welcome to DediRock, your trusted partner in high-performance hosting solutions. At DediRock, we specialize in providing dedicated servers, VPS hosting, and cloud services tailored to meet the unique needs of businesses and individuals alike. Our mission is to deliver reliable, scalable, and secure hosting solutions that empower our clients to achieve their digital goals. With a commitment to exceptional customer support, cutting-edge technology, and robust infrastructure, DediRock stands out as a leader in the hosting industry. Join us and experience the difference that dedicated service and unwavering reliability can make for your online presence. Launch our website.