Swagger UI を使用せずに JSON データを FastAPI エンドポイントに送信するにはどうすればよいですか?
- Patricia Arquetteオリジナル
- 2024-10-24 02:32:02524ブラウズ
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"><!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>
使用法
フロントエンドにアクセスするには、http://localhost:8080/ に移動します。フォームにデータを入力し、「送信」ボタンをクリックしてください。 / エンドポイントからの応答は、HTML の "responseArea" div に表示されます。
次に示すように、.catch() メソッドを使用すると、JavaScript コードでエンドポイントによってスローされた例外を処理できることに注意してください。例では。
以上がSwagger UI を使用せずに JSON データを FastAPI エンドポイントに送信するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。