Bagaimana untuk Menghantar Data JSON ke Titik Akhir FastAPI tanpa UI Swagger?-Tutorial Python-php.cn

Bagaimana untuk Menghantar Data JSON ke Titik Akhir FastAPI tanpa UI Swagger?

Patricia Arquette

Lepaskan： 2024-10-24 02:32:02

asal

556 orang telah melayarinya

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

Memintas UI Swagger untuk Penyiaran Data JSON dalam FastAPI

Walaupun UI Swagger (OpenAPI) menawarkan cara yang mudah untuk menguji titik akhir API, mungkin terdapat senario yang anda perlukan untuk menghantar data JSON secara langsung tanpa penggunaannya. Artikel ini menyediakan penyelesaian untuk menyiarkan data JSON ke titik akhir FastAPI menggunakan antara muka JavaScript.

Untuk mencapai matlamat ini, kami akan menggunakan API Ambil, yang membenarkan penghantaran data dalam format JSON. Selain itu, kami akan menggunakan Jinja2Templates untuk mencipta templat untuk bahagian hadapan.

Pelaksanaan Belakang

Dalam app.py, aplikasi FastAPI ditakrifkan dengan titik / yang menerima permintaan POST dengan model 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>

Salin selepas log masuk

Pelaksanaan Depan

Dalam templat index.html, borang HTML disediakan untuk memasukkan data nama dan gulungan. Fungsi submitForm() menggunakan API Ambil untuk menghantar data sebagai 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>

Salin selepas log masuk

Penggunaan

Navigasi ke http://localhost:8080/ untuk mengakses bahagian hadapan. Masukkan data ke dalam borang dan klik butang "Serah". Respons daripada titik / akhir akan dipaparkan dalam div "responseArea" HTML.

Perhatikan bahawa anda boleh mengendalikan pengecualian yang dilemparkan oleh titik akhir dalam kod JavaScript anda dengan menggunakan kaedah .catch() seperti yang ditunjukkan dalam contoh.

Atas ialah kandungan terperinci Bagaimana untuk Menghantar Data JSON ke Titik Akhir FastAPI tanpa UI Swagger?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!