Comment envoyer des données JSON aux points de terminaison FastAPI sans l'interface utilisateur Swagger ?-Tutoriel Python-php.cn

Comment envoyer des données JSON aux points de terminaison FastAPI sans l'interface utilisateur Swagger ?

Patricia Arquette

Libérer： 2024-10-24 02:32:02

original

529 Les gens l'ont consulté

How to Send JSON Data to FastAPI Endpoints without Swagger UI?

Contourner l'interface utilisateur Swagger pour la publication de données JSON dans FastAPI

Bien que l'interface utilisateur Swagger (OpenAPI) offre un moyen pratique de tester les points de terminaison de l'API, il peut y avoir des scénarios dans lesquels vous avez besoin pour envoyer des données JSON directement sans leur utilisation. Cet article propose une solution pour publier des données JSON sur un point de terminaison FastAPI à l'aide d'une interface JavaScript.

Pour y parvenir, nous utiliserons l'API Fetch, qui permet d'envoyer des données au format JSON. De plus, nous utiliserons Jinja2Templates pour créer un modèle pour le frontend.

Implémentation du backend

Dans app.py, l'application FastAPI est définie avec un point de terminaison / qui accepte les requêtes POST avec un modèle Item. .

<code class="python">from fastapi import FastAPI, Request, HTTPException
from fastapi.templating import Jinja2Templates
from pydantic import BaseModel

class Item(BaseModel):
    name: str
    roll: int

app = FastAPI()
templates = Jinja2Templates(directory="templates")

@app.post("/")
async def create_item(item: Item):
    if item.name == "bad request":
        raise HTTPException(status_code=400, detail="Bad request.")
    return item

@app.get("/")
async def index(request: Request):
    return templates.TemplateResponse("index.html", {"request": request})</code>

Copier après la connexion

Implémentation du frontend

Dans le modèle index.html, un formulaire HTML est fourni pour saisir les données de nom et de rôle. La fonction submitForm() utilise l'API Fetch pour envoyer les données au format JSON.

<code class="html"><!DOCTYPE html>
<html>
  <body>
    <h1>Post JSON Data</h1>
    <form method="post" id="myForm">
      name : <input type="text" name="name" value="foo">
      roll : <input type="number" name="roll" value="1">
      <input type="button" value="Submit" onclick="submitForm()">
    </form>
    <div id="responseArea"></div>
    <script>
      function submitForm() {
        var formElement = document.getElementById("myForm");
        var data = new FormData(formElement);
        fetch("/", {
          method: "POST",
          headers: {
            "Accept": "application/json",
            "Content-Type": "application/json",
          },
          body: JSON.stringify(Object.fromEntries(data)),
        })
        .then(resp => resp.text())
        .then(data => {
          document.getElementById("responseArea").innerHTML = data;
        })
        .catch(error => {
          console.error(error);
        });
      }
    </script>
  </body>
</html></code>

Copier après la connexion

Utilisation

Naviguez vers http://localhost:8080/ pour accéder au frontend. Saisissez les données dans le formulaire et cliquez sur le bouton "Soumettre". La réponse du point de terminaison / sera affichée dans le div "responseArea" du code HTML.

Notez que vous pouvez gérer les exceptions levées par le point de terminaison dans votre code JavaScript en utilisant la méthode .catch(), comme indiqué dans l'exemple.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!