JSON データを JavaScript フロントエンドから FastAPI バックエンドに送信するにはどうすればよいですか?

DDD
リリース: 2024-11-10 14:05:03
オリジナル
414 人が閲覧しました

How to Send JSON Data from a JavaScript Front-End to a FastAPI Back-End?

JavaScript フロントエンドから FastAPI バックエンドへの JSON データの送信

FastAPI では、パス パラメーターの一部ではなく関数内で宣言されたパラメーターは自動的にクエリとして解釈されますパラメータ。この解釈は、リクエスト本文で JSON データを渡す一般的な方法とは異なります。

この矛盾に対処するには、いくつかのオプションがあります。

Pydantic モデルの使用

Pydantic の作成予想される JSON 本体を定義するモデル:

from pydantic import BaseModel

class Item(BaseModel):
    eth_addr: str

@app.post("/ethAddress")
def add_eth_addr(item: Item):
    return item
ログイン後にコピー

JavaScript Fetch API:

headers: {
  Accept: "application/json",
  "Content-Type": "application/json",
},
body: JSON.stringify({ eth_addr: "some addr" }),
ログイン後にコピー
ログイン後にコピー

本体パラメータの使用

タイプの Body= を使用:

from fastapi import Body

@app.post("/ethAddress")
def add_eth_addr(eth_addr: str = Body()):
    return {"eth_addr": eth_addr}
ログイン後にコピー

JavaScript フェッチ API:

headers: {
  Accept: "application/json",
  "Content-Type": "application/json",
},
body: JSON.stringify("some addr"),
ログイン後にコピー

ボディ埋め込みパラメータの使用

embed=True を使用してボディのみのパラメータを簡素化:

@app.post("/ethAddress")
def add_eth_addr(eth_addr: str = Body(embed=True)):
    return {"eth_addr": eth_addr}
ログイン後にコピー

JavaScript フェッチ API :

headers: {
  Accept: "application/json",
  "Content-Type": "application/json",
},
body: JSON.stringify({ eth_addr: "some addr" }),
ログイン後にコピー
ログイン後にコピー

JavaScript の詳細と例については、次を参照してください:

  • https://fastapi.tiangolo.com/advanced/requestBody/
  • https://fastapi.tiangolo.com/tutorial/body-forms/#formencoded-or-raw-body-few-parameters
  • https://stackoverflow.com/questions/55333220/fastapi-validation- for-payload-when-using-body

クエリ パラメーターの使用は、Web API での JSON 本体データの一般的なアプローチではないことに注意してください。これらのオプションに合わせてコードを調整してください。

以上がJSON データを JavaScript フロントエンドから FastAPI バックエンドに送信するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート