Sending Data with POST Requests Using JavaScript

Sending Data with POST Requests

Welcome to this lesson on sending data with POST requests . As you continue your exploration of interacting with RESTful APIs, you'll learn how to send data to a server using the POST method. POST requests are essential when you want to create new resources or submit data, such as filling out a web form or adding a new entry to a database. Unlike GET requests, which you have already encountered, POST requests do not solely retrieve information; they actually transmit data to an API. Understanding these differences is crucial as you expand your skill set in HTTP methods. Let’s dive deeper into utilizing POST requests to comprehend how they stand apart from GET requests.

Key Differences Between GET and POST

Before diving into POST requests, let's briefly compare them to GET requests: GET Requests : Purpose : Retrieve data from a server. Data Location : Data is sent in the URL as path or query parameters. Success Status : Expect a 200 status code for successful data retrieval. POST Requests : Purpose : Send data to a server to create or update a resource, such as submitting a form, uploading a file, or adding a new item to a database. Data Location : Data is sent in the request body. Success Status : Expect a 201 status code for successful resource creation. These differences clarify when to use each method. POST requests, in particular, require careful handling of the request body.

Understanding the Request Body

For POST requests, the request body is crucial as it holds the data you want to send to the server. This data is usually structured in formats like JSON or form data, with JSON being a common choice due to its readability and compatibility. Here’s an example of a JSON request body: JSON {"title": "Learn JavaScript fetch API", "description": "Complete a course on JavaScript API calls.", "done": false} This represents a new to-do item, including a title, completion status, and description. Noticeably, we are not sending an id, as this is typically managed by the server upon resource creation. With a solid understanding of GET vs. POST and the role of the request body, you’re ready to explore how to utilize JavaScript to handle POST operations.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Crafting a Post Request: Adding a New Todo

Let's walk through an example of how to craft a POST request to add a new to-do item to our API.

First, we will need to prepare the data we wish to send. Here, we'll be adding a new to-do item with a specific title, a completion status, and a description. The data is structured as a JavaScript object:

JavaScript

// New todo data
const newTodo = {
  title: "Learn JavaScript fetch API",
  description: "Complete a course on JavaScript API calls.",
  done: false
};

// New todo data
const newTodo = {
  title: "Learn JavaScript fetch API",
  description: "Complete a course on JavaScript API calls.",
  done: false
};

In JavaScript, you can use the Fetch API to send the request body by utilizing the fetch() method with async/await. Before sending the data, it needs to be converted into a JSON string using the JSON.stringify() method. Additionally, headers are used to provide information about the request, such as the format of the data being sent. The Content-Type header is set to 'application/json' to indicate that the request body is in JSON format:

JavaScript

// Send POST request
async function addNewTodo() {
  try {
    const response = await fetch(`${baseUrl}/todos`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json' // Specifies the format of the request body
      },
      body: JSON.stringify(newTodo) // Convert the JavaScript object to a JSON string
    });

    if (response.ok) {
      const data = await response.json();
      console.log("New todo added successfully!");
      console.log(data);
    } else {
      throw new Error(`Request failed with status ${response.status}`);
    }
  } catch (error) {
    console.error("Failed to add a new todo");
    console.error(error.message);
  }
}

addNewTodo();

// Send POST request
async function addNewTodo() {
  try {
    const response = await fetch(`${baseUrl}/todos`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json' // Specifies the format of the request body
      },
      body: JSON.stringify(newTodo) // Convert the JavaScript object to a JSON string
    });

    if (response.ok) {
      const data = await response.json();
      console.log("New todo added successfully!");
      console.log(data);
    } else {
      throw new Error(`Request failed with status ${response.status}`);
    }
  } catch (error) {
    console.error("Failed to add a new todo");
    console.error(error.message);
  }
}

addNewTodo();

The JSON.stringify() method is used to convert a JavaScript object into a JSON string, which is the format required for the request body in a POST request. This conversion is essential for the server to correctly interpret the data being sent.

Example of Unsuccessful POST Request

A POST request may fail if required fields are missing. For instance, omitting a "title" might lead to an error response:

JavaScript

// New todo data with missing title
const newTodo = {
  // title: "Learn JavaScript fetch API",  // Title is missing
  done: false,
  description: "Complete a course on JavaScript API calls."
};

async function addNewTodo() {
  try {
    const response = await fetch(`${baseUrl}/todos`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(newTodo)
    });

    if (response.ok) {
      const data = await response.json();
      console.log("New todo added successfully!");
      console.log(data);
    } else {
      throw new Error(`Request failed with status ${response.status}`);
    }
  } catch (error) {
    console.error("Failed to add a new todo");
    console.error(error.message);
  }
}

addNewTodo();

// Expected output in console:
// "Failed to add a new todo"
// "Request failed with status 400" (or another error status code depending on server validation)

// New todo data with missing title
const newTodo = {
  // title: "Learn JavaScript fetch API",  // Title is missing
  done: false,
  description: "Complete a course on JavaScript API calls."
};

async function addNewTodo() {
  try {
    const response = await fetch(`${baseUrl}/todos`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(newTodo)
    });

    if (response.ok) {
      const data = await response.json();
      console.log("New todo added successfully!");
      console.log(data);
    } else {
      throw new Error(`Request failed with status ${response.status}`);
    }
  } catch (error) {
    console.error("Failed to add a new todo");
    console.error(error.message);
  }
}

addNewTodo();

// Expected output in console:
// "Failed to add a new todo"
// "Request failed with status 400" (or another error status code depending on server validation)

Running this code would output an error message if the "title" is required, allowing identification and correction of the issue.