如何正確地將 JSON 資料從 JavaScript 前端傳送到 FastAPI 後端？

將JSON 資料從JavaScript 前端發佈到FastAPI 後端

了解問題

您在嘗試以下操作時遇到到錯誤將JSON 負載從JavaScript 前端傳遞到FastAPI 後端。具體來說，您嘗試從客戶端輸入表單傳遞“ethAddress”值以產生圖表。

解決問題

發生錯誤是因為您的 FastAPI端點期望「ethAddress」參數作為查詢參數，而不是作為 JSON 正文的一部分。因此，解決方案在於修改 FastAPI 端點以處理 JSON 負載。

解決方案：處理 JSON 負載

選項 1：使用 Pydantic 模型

• 建立一個🎜>模型來表示請求body:

from pydantic import BaseModel

class EthAddressModel(BaseModel):
    eth_addr: str

• 修改您的端點以期望Pydantic 模型:

@app.post('/ethAddress')
def add_eth_addr(item: EthAddressModel):
    return item

選項2：使用選項2：使用Body參數

• 直接註解「ethAddress」參數為body 參數：

from fastapi import Body

@app.post('/ethAddress')
def add_eth_addr(eth_addr: str = Body()):
    return {'eth_addr': eth_addr}

選項3：使用Body(embed=True) 修飾符

• 使用Body(embed) =True)修飾符將整個請求正文解析為單一參數：

from fastapi import Body

@app.post('/ethAddress')
def add_eth_addr(eth_addr: str = Body(embed=True)):
    return {'eth_addr': eth_addr}

修改的JavaScript 程式碼

修改您的JavaScript 取得請求以正確傳送JSON 正文請求：

fetch("http://localhost:8000/ethAddress", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ eth_addr: "your_eth_address" }),
}).then(fetchEthAddresses);

結論

透過使用其中一個解決方案，您可以讓FastAPI 後端正確接收和處理來自JavaScript 前端的JSON 有效負載，從而允許您傳遞和使用「ethAddress」值來產生圖表。

以上是如何正確地將 JSON 資料從 JavaScript 前端傳送到 FastAPI 後端？的詳細內容。更多資訊請關注PHP中文網其他相關文章！