How to Post JSON Data from JavaScript Frontend to FastAPI Backend?

In modern web development, the integration of frontend and backend technologies is crucial for building dynamic and interactive web applications. When it comes to communicating data between these two components, JavaScript and FastAPI are powerful tools. This article will guide you through the process of posting JSON data from a JavaScript frontend to a FastAPI backend, covering various approaches, syntax, implementation steps, and examples.

We will discuss the approaches to post JSON data from the JavaScript frontend to the FastAPI backend:

What is JOSN?

JSON stands for JavaScript Object Notation. It is a format for structuring data. This format is used by different web applications to communicate with each other. It is the replacement of the XML data exchange format. It is easier to structure the data compared to XML. It supports data structures like arrays and objects, and JSON documents that are rapidly executed on the server.

What is FastAPI?

FastAPI is a modern, fast (high-performance), web framework for building APIs with Python 3.6+ based on standard Python type hints. It is designed to be easy to use, efficient, and reliable, making it a popular choice for developing RESTful APIs and web applications.

Steps to Setup Backend App

Step 1: Create a backend application using the following command:

npm init -y

Step 2: Navigate to the root directory of your code using the following command:

cd foldername

Step 3: Install the package using the following command:

npm install axios

The updated dependencies in your package.json file is

 "dependencies": {
    "express": "^4.18.2",
    "axios": "^1.6.8",
  }

Using Fetch API

The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It offers a simple and powerful way to fetch resources asynchronously across the network.

Syntax:

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
});

Example: This example demonstrates how to use the Fetch API to post JSON data from a JavaScript frontend to a FastAPI backend.

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

postData('https://65cf4c85bdb50d5e5f5af68b.mockapi.io/crud',
    {
        name: 'GFG',
        age: 22
    })
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('Error:', error);
    });

Output:

Using Axios Library

Axios is a popular promise-based HTTP client for JavaScript that works in both the browser and Node.js environments. It provides an easy-to-use API that simplifies the process of making HTTP requests.

Steps to Install axios:

npm install axios

Syntax:

axios.post(url, data, {
  headers: {
    'Content-Type': 'application/json'
  }
});

Example: This example demonstrates how to use the Axios library to post JSON data from a JavaScript frontend to a FastAPI backend.

// Frontend JavaScript code
const axios = require("axios")
axios.post('https://65cf4c85bdb50d5e5f5af68b.mockapi.io/crud',
    {
        name: 'GFG',
        age: 23
    }, {
    headers: {
        'Content-Type': 'application/json'
    }
})
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error('Error:', error);
    });

Output: