Swagger UI を使用せずに JSON データを FastAPI エンドポイントに送信するにはどうすればよいですか?

FastAPI での JSON データ投稿のための Swagger UI のバイパス

Swagger UI (OpenAPI) は API エンドポイントをテストする便利な方法を提供しますが、必要なシナリオが存在する場合があります。 JSON データを使用せずに直接送信します。この記事では、JavaScript インターフェイスを使用して JSON データを FastAPI エンドポイントに投稿するためのソリューションを提供します。

これを実現するには、JSON 形式でデータを送信できる Fetch API を利用します。さらに、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 中国語 Web サイトの他の関連記事を参照してください。