Fetch Api | Beginner | Javascript Essentials Tutorial

Using the Fetch API for network requests

The Fetch API is a modern interface that allows you to make network requests similar to XMLHttpRequest but with a more powerful and flexible feature set. This tutorial covers the basics of using the Fetch API for making GET and POST requests, handling responses, and dealing with errors.

Key Points:

The Fetch API provides a modern, flexible way to make HTTP requests.
Fetch API uses Promises to handle asynchronous operations.
Understanding the Fetch API is essential for working with network requests in modern web applications.

Making a GET Request

To make a GET request using the Fetch API, you can call the fetch() method with the URL of the resource you want to fetch. Here is an example:


fetch('https://jsonplaceholder.typicode.com/posts')
    .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 fetching data:', error);
    });

Making a POST Request

To make a POST request using the Fetch API, you can call the fetch() method with the URL and an options object that includes the method, headers, and body of the request. Here is an example:


const postData = {
    title: 'foo',
    body: 'bar',
    userId: 1
};

fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json;charset=UTF-8'
    },
    body: JSON.stringify(postData)
})
.then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json();
})
.then(data => {
    console.log('Data sent successfully:', data);
})
.catch(error => {
    console.error('Error sending data:', error);
});

Handling Responses

The Fetch API provides a Response object that represents the response to a request. You can use methods like json(), text(), or blob() to process the response data. Here is an example of handling a JSON response:


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

Handling Errors

Handling errors with the Fetch API involves checking the response status and using the catch method to handle any errors that occur during the request. Here is an example:


fetch('https://jsonplaceholder.typicode.com/invalid-url')
    .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 fetching data:', error);
    });

Using Async/Await with Fetch API

You can use async/await to work with the Fetch API in a more readable and concise way. Here is an example:


async function fetchData() {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

fetchData();

Summary

In this tutorial, you learned about using the Fetch API for network requests in JavaScript. You explored how to make GET and POST requests, handle responses, deal with errors, and use async/await with the Fetch API. Understanding the Fetch API is essential for working with network requests in modern web applications.

JavaScript Essentials - Fetch API