fetch api in js

Fetch API in JavaScript

Fetch API is a modern way of making network requests in JavaScript. It provides a global fetch() method that returns a Promise which resolves to the Response object representing the response to the request.

Syntax

fetch(resource [, options])
    .then(response => { ... })
    .catch(error => { ... });

• resource - The URL of the resource to request.
• options (optional) - An object containing request options like headers, method, body, etc.
• response - The Response object returned by the server.
• error - The error object thrown if the request fails.

Fetch Request Methods

The most commonly used HTTP request methods are:

• GET - The HTTP GET method is used to retrieve data from the server.
• POST - The HTTP POST method is used to submit data to the server.
• PUT - The HTTP PUT method is used to update an existing resource on the server.
• DELETE - The HTTP DELETE method is used to delete a resource from the server.

Example

Let's see an example of how to make a GET request using fetch API:

fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

In the above example, we are making a GET request to the JSONPlaceholder API to fetch the first post. The .json() method is used to parse the JSON response and convert it into a JavaScript object. The returned data is then logged to the console.

Multiple Ways to Use Fetch API

There are multiple ways to use Fetch API depending on the type of request and the data being sent. Here are some examples:

• Making a POST request with JSON data:

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))
    .catch(error => console.error(error));

• Making a PUT request with form data:

const formData = new FormData();
formData.append('title', 'foo');
formData.append('body', 'bar');
formData.append('userId', 1);

fetch('https://jsonplaceholder.typicode.com/posts/1', {
    method: 'PUT',
    body: formData
})
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

These are just a few examples of how Fetch API can be used in JavaScript. It provides a modern and flexible way of making network requests and can be used in place of traditional methods like XMLHttpRequest.