Fetch API Explained

Key Concepts

The Fetch API is a modern interface for making network requests in JavaScript. The key concepts include:

• Fetch API Basics
• Making GET Requests
• Making POST Requests
• Handling Responses
• Error Handling
• Using Fetch with JSON

Fetch API Basics

The Fetch API provides a simple and flexible way to make network requests. It uses promises to handle asynchronous operations, making it easier to manage and chain requests.

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

Making GET Requests

GET requests are used to retrieve data from a server. The Fetch API allows you to specify the URL and any necessary headers.

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

Making POST Requests

POST requests are used to send data to a server. You can include the data in the body of the request and specify the appropriate headers.

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

Handling Responses

Fetch API responses are wrapped in a Response object. You can extract the data using methods like json(), text(), or blob().

fetch('https://api.example.com/data')
    .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));
    

Error Handling

Error handling in Fetch API involves checking the response status and using catch to handle any errors that occur during the request.

fetch('https://api.example.com/data')
    .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));
    

Using Fetch with JSON

JSON is a common data format used with Fetch API. You can send and receive JSON data by setting the appropriate headers and using JSON.stringify() and response.json().

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

Examples and Analogies

Imagine Fetch API as a courier service:

• Fetch API Basics: Think of it as the courier service that picks up and delivers packages.
• Making GET Requests: Like requesting a package to be delivered to your doorstep.
• Making POST Requests: Like sending a package to someone else.
• Handling Responses: Like checking the contents of the delivered package.
• Error Handling: Like dealing with any issues that arise during delivery.
• Using Fetch with JSON: Like sending and receiving packages with specific labels and contents.