How to use Fetch API to POST JSON Data in JavaScript

Using the Fetch API to POST JSON data in JavaScript is a common task when interacting with web servers or APIs. Here’s a step-by-step guide to performing a POST request with JSON data using the Fetch API:

1. Basic Example#

Here’s a basic example of how to use the Fetch API to send a POST request with JSON data:

const url = "https://example.com/api/endpoint"; // Replace with your API endpoint

const data = {
    name: "John Doe",
    email: "[email protected]",
};

fetch(url, {
    method: "POST", // Specify the request method
    headers: {
        "Content-Type": "application/json", // Set the content type to JSON
    },
    body: JSON.stringify(data), // Convert the JavaScript object to a JSON string
})
    .then((response) => response.json()) // Parse the JSON response
    .then((data) => {
        console.log("Success:", data); // Handle the response data
    })
    .catch((error) => {
        console.error("Error:", error); // Handle any errors
    });

2. Explanation#

• URL: The endpoint where you want to send the POST request.
• method: Specifies that this is a POST request.
• headers: Contains information about the request. Setting 'Content-Type': 'application/json' tells the server that you are sending JSON data.
• body: The actual data being sent to the server. JSON.stringify(data) converts the JavaScript object data into a JSON string.

3. Handling Different Response Types#

You might need to handle different response types or statuses. Here’s how to handle different types of responses:

fetch(url, {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
    },
    body: JSON.stringify(data),
})
    .then((response) => {
        if (!response.ok) {
            throw new Error(
                "Network response was not ok " + response.statusText
            );
        }
        return response.json(); // Parse JSON if the response is OK
    })
    .then((data) => {
        console.log("Success:", data); // Handle the response data
    })
    .catch((error) => {
        console.error("Error:", error); // Handle errors
    });

4. Sending Additional Headers#

If you need to include additional headers in your request, such as authorization tokens or custom headers, you can add them to the headers object:

fetch(url, {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer YOUR_ACCESS_TOKEN", // Example of an authorization header
        "Custom-Header": "CustomValue", // Example of a custom header
    },
    body: JSON.stringify(data),
})
    .then((response) => response.json())
    .then((data) => {
        console.log("Success:", data);
    })
    .catch((error) => {
        console.error("Error:", error);
    });

5. Using Async/Await#

You can also use async/await syntax for cleaner code, especially in modern JavaScript:

const postData = async () => {
    try {
        const response = await fetch(url, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify(data),
        });

        if (!response.ok) {
            throw new Error(
                "Network response was not ok " + response.statusText
            );
        }

        const result = await response.json();
        console.log("Success:", result);
    } catch (error) {
        console.error("Error:", error);
    }
};

postData();

Summary#

• Use fetch with method: 'POST' to send POST requests.
• Set the Content-Type header to 'application/json' when sending JSON data.
• Convert your data to a JSON string using JSON.stringify.
• Handle responses and errors appropriately.
• Optionally, use async/await for cleaner code.

This approach is versatile and can be adapted for various types of requests and data formats.