如何在沒有 Swagger UI 的情況下將 JSON 資料傳送到 FastAPI 端點？

繞過Swagger UI 以在FastAPI 發布JSON 資料

雖然Swagger UI (OpenAPI) 提供了一種測試API 端點的便捷方法，但在某些情況下您可能需要直接發送JSON 資料而不使用它。本文提供了一個使用 JavaScript 介面將 JSON 資料發佈到 FastAPI 端點的解決方案。

為了實現這一點，我們將利用 Fetch API，它允許以 JSON 格式發送資料。此外，我們將使用 Jinja2Templates 為前端建立一個範本。

後端實作

在app.py 中，FastAPI 應用程式使用/ 端點定義，該端點接受帶有Item 模型的POST 請求.

<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>

前端實作

在index.html範本中，提供了一個HTML表單用於輸入姓名和磁碟區資料。 SubmitForm() 函數使用 Fetch API 以 JSON 形式傳送資料。

<code class="html">

  
    <h1 id="Post-JSON-Data">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>
  
</code>

用法

導覽至 http://localhost:8080/ 以存取前端。在表格中輸入資料並點擊“提交”按鈕。來自 / 端點的回應將顯示在 HTML 的「responseArea」div 中。

請注意，您可以使用 .catch() 方法在 JavaScript 程式碼中處理端點拋出的異常，如下所示在範例中。

以上是如何在沒有 Swagger UI 的情況下將 JSON 資料傳送到 FastAPI 端點？的詳細內容。更多資訊請關注PHP中文網其他相關文章！