如何正确地将 JSON 数据从 JavaScript 前端发送到 FastAPI 后端？

将 JSON 数据从 JavaScript 前端发布到 FastAPI 后端

了解问题

您在尝试以下操作时遇到错误将 JSON 负载从 JavaScript 前端传递到 FastAPI 后端。具体来说，您尝试从客户端输入表单传递“ethAddress”值以生成图表。

解决问题

发生错误是因为您的 FastAPI端点期望“ethAddress”参数作为查询参数，而不是作为 JSON 正文的一部分。因此，解决方案在于修改 FastAPI 端点以处理 JSON 负载。

解决方案：处理 JSON 负载

选项 1：使用 Pydantic 模型

• 创建一个 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：使用 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中文网其他相关文章！