Swagger UI を使用せずに FastAPI バックエンドに JSON データを直接投稿する

FastAPI を使用すると、ユーザーは、Swagger UI を使用しなくても、JSON データをバックエンドに簡単に投稿できます。 Swagger UI によって提供される自動ドキュメント。この記事では、データをバックエンド URL に直接送信し、結果をブラウザに表示する簡単なプロセスについて詳しく説明します。

FastAPI アプリケーションの作成

まず、基本的なアプリケーションを作成します。 POST 操作と JSON ペイロードを逆シリアル化するためのモデル クラスを備えた FastAPI アプリケーション:

from fastapi import FastAPI
from pydantic import BaseModel

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

app = FastAPI()

@app.post("/")
async def create_item(item: Item):
    return item

JavaScript を使用したフロントエンドの実装

フロントエンドでは、Fetch API を利用します。これにより、JSON データをバックエンド URL に直接送信できるようになります。

fetch('/', {
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({name: "XYZ", roll: 51})
})
.then(resp => resp.text())
.then(data => {
    console.log(data);  // Display the result in the browser
})
.catch(error => {
    console.error(error);
});

このスクリプトでは、正しいヘッダーを指定してデータを JSON 文字列に変換する POST リクエストを作成します。サーバーの応答はブラウザに表示されます。

代替方法

FastAPI バックエンドにデータを送信するためのその他の方法には、次のようなものがあります。

• フォーム データ: FormData を使用してデータを送信するには、フォームベースのアプローチを使用します。 class.
• ファイルとフォーム/JSON データ: より複雑なシナリオでは、ファイルとフォーム/JSON データの組み合わせを利用します。

結論

Swagger UI を使用しない FastAPI バックエンドへの JSON データの投稿は、JavaScript を使用してデータを直接送信する必要がある簡単なプロセスです。バックエンド URL。フォームベースのデータ送信であっても、ファイルとフォーム/JSON データの組み合わせであっても、ニーズに合わせてさまざまな方法から選択できます。