How do you send a POST request using fetch() in JavaScript?

Sending a POST request using the fetch() function in JavaScript is a simple process.

What is fetch()?

fetch() is a built-in function in modern web browsers that allows JavaScript code to make network requests. It uses Promises to handle the response, which makes it easier to handle asynchronous code.

Creating a Request Object

To create a POST request using fetch(), we need to create a request object that includes the URL, headers, and body of the request.

The URL is the endpoint where we want to send the request. The headers are additional metadata about the request, such as the content type of the body. The body is the data we want to send to the server.

Here is an example of how to create a request object:

const url = "https://example.com/api/users";
const data = {
  username: "john_doe",
  email: "john_doe@example.com",
};

const request = new Request(url, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(data),
});

Sending the Request

Once we have created the request object, we can use the fetch() function to send the request to the server. fetch() returns a Promise that resolves to the response from the server.

Here is an example of how to send the request using fetch():

fetch(request)
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

Handling the Response

The response from the server can be handled in a variety of ways, depending on the type of data we receive. In this example, we assume that the server returns a JSON object.

We first use the .then() method to parse the JSON data from the response. Then, we can use the .then() method again to handle the parsed data, such as logging it to the console or updating the UI.

If there is an error with the request, we can use the .catch() method to handle the error.

Here is an example of how to handle the response:

fetch(request)
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
    // Update the UI with the data
  })
  .catch((error) => {
    console.error(error);
    // Display an error message to the user
  });

Putting It All Together

Here is an example of how to send a POST request using fetch() in JavaScript, including creating a request object, sending the request, and handling the response:

const url = "https://example.com/api/users";
const data = {
  username: "john_doe",
  email: "john_doe@example.com",
};

const request = new Request(url, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(data),
});

fetch(request)
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
    // Update the UI with the data
  })
  .catch((error) => {
    console.error(error);
    // Display an error message to the user
  });