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

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

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

Welcome to Day 31–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 31 (April 22nd, 2024) — Fetch API (POST) Request.

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

Answer Let’s assume that we are making a request to an external API to get some posts data from a server.

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” with Method POST

Simple Fetch API Syntax with Options

Today we will options to work with POST 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'

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'

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

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

STEP 3

Complete the Fetch Request with Options

Please find the code with options

const url = 'https://jsonplaceholder.typicode.com/posts'
const postData = {
    title: 'foo',
     body: 'bar',
     userId: 1
  }

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

// 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.

Please find complete code with promise handling

const url = 'https://jsonplaceholder.typicode.com/posts' ;
const postData = {
    title: 'foo',
     body: 'bar',
     userId: 1
  }

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

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 => {
    // Do something with the response data
    console.log(data);
  })

STEP 5

Handle the exceptions with catch

const url = 'https://jsonplaceholder.typicode.com/posts'
const postData = {
    title: 'foo',
     body: 'bar',
     userId: 1
  }

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

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 => {
    // Do something with the response data
    console.log(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 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 POST Method — we will see request payload (body as per our above code reference)

Status Code — 201 created (when new resource created)

Conclusion

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

Tomorrow we will learn more about fetch API with PUT(UPDATE) 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 :)

Other Articles