JavaScript Day 32 — Mastering JavaScript Basics: A Comprehensive Guide for Interview Preparation

100 Days of JavaScript Interview Prep: A Beginner’s Journey

How to Make a PUT Request with Fetch API in JavaScript?

Welcome to Day 32–100 Days of JavaScript Interview Prep: A Beginner’s Journey with Fetch API

Embarking on a 100-day adventure focused on learning, practice, and growth sounds like an incredibly rewarding journey.

DAY 32 (April 23rd, 2024) — Fetch API (PUT) Request.

How to Make a PUT Request with Fetch API in JavaScript?

Answer Let’s assume that we are making a request to an external API to update data with help of PUT Method.

We will use JsonPlaceholder website (Free fake and reliable API for testing and prototyping).

Below is the URL for our JsonPlaceholder website

Getting Started

Let’s start with simple API “https://jsonplaceholder.typicode.com/posts/1” with Method PUT

Note —

PUT method is used for updating record

Simple Fetch API Syntax with Options

Today we will option to work with PUT Method

fetch(resource, options) // options

Getting Started with Fetch API

STEP 1

fetch() with the endpoint URL (resource) as the argument.

const url = 'https://jsonplaceholder.typicode.com/posts/1' ;

fetch(url);

STEP 2

We will define URL and options for the fetch request.

a) Define the data which we need to send

b) Define the options with method , headers and body

Please find below code with data which needs to pass for body , method , headers and body.

const url = 'https://jsonplaceholder.typicode.com/posts/1' ;
const putData = {
    id: 1,
    title: 'footest',
    body: 'barddd',
    userId: 1,
  }

const options = {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json' // Specify the content type as JSON
  },
  body: JSON.stringify(putData) // Convert the data
};

STEP 3

Complete the Fetch Request with Options

Please find the code with options

const url = 'https://jsonplaceholder.typicode.com/posts/1' ;
const putData = {
    id: 1,
    title: 'footest',
    body: 'barddd',
    userId: 1,
  }

const options = {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json' // Specify the content type as JSON
  },
  body: JSON.stringify(putData) // Convert the data
};

// Send the POST request
fetch(url, options)
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json(); // Parse the JSON response
  })

STEP 4

Handle the Promise of Fetch

Tip : to handle promise, we need to add then statement.

Please find complete code with promise handling

const url = 'https://jsonplaceholder.typicode.com/posts/1' ;

const putData = {
    id: 1,
    title: 'footest',
    body: 'barddd',
    userId: 1,
  }

const options = {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json' // Specify the content type as JSON
  },
  body: JSON.stringify(putData) // Convert the data 
};
// Send the POST request

fetch(url, options)
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json(); // Parse the JSON response
  }) .then(data => {
    console.log('Data updated successfully:', data);
  })

STEP 5

Handle the exceptions with catch

const url = 'https://jsonplaceholder.typicode.com/posts/1' ;
const putData = {
    id: 1,
    title: 'footest',
    body: 'barddd',
    userId: 1,
  }

const options = {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json' // Specify the content type as JSON
  },
  body: JSON.stringify(putData) // Convert the data
};

fetch(url, options)
  .then(response => {
    if (!response.ok) { 
      throw new Error('Network response was not ok');
    }
    return response.json(); // Parse the JSON response
  }) .then(data => {
    console.log('Data updated successfully:', data);
  }).catch(error => {
    // Handle any errors that occur during the fetch request
    console.error('There was a problem with the fetch operation:', error);
  });

STEP 6

Test the above code in any JavaScript application running on local host or use any live JavaScript playground

We will use below JavaScript playground

Step 7 Final Debugging in Network Tab

Open the DevTools and click on Network tab

You can see the call in network with all parameters and options

In our PUT Method — we will see request payload (body as per our above code reference)

Status Code — 200 ok (when resource updated)

Conclusion

Above code is sample example so remember to replace 'url' with the actual URL you want to send the PUT request to, and adjust the putData object accordingly with your desired data.

Tomorrow we will learn more about fetch API with Delete method examples.

Happy Coding and Stay Tuned :)

Kind is cool !!!

Share knowledge to gain knowledge !!!!

Be kind and treat people with respect !

If you find my blog helpful, then please subscribe, claps and follow to support :)