Wie sende ich JSON-Daten korrekt von einem JavaScript-Frontend an ein FastAPI-Backend?

JSON-Daten vom JavaScript-Frontend zum FastAPI-Backend veröffentlichen

Verstehen des Problems

Beim Versuch treten Fehler auf Übergeben Sie eine JSON-Nutzlast von Ihrem JavaScript-Frontend an Ihr FastAPI-Backend. Konkret versuchen Sie, einen „ethAddress“-Wert aus einem Client-Eingabeformular zu übergeben, um ein Diagramm zu generieren.

Behebung des Problems

Der Fehler tritt aufgrund Ihrer FastAPI auf Endpoint erwartet den Parameter „ethAddress“ als Abfrageparameter und nicht als Teil des JSON-Bodys. Daher besteht die Lösung darin, Ihren FastAPI-Endpunkt so zu ändern, dass er JSON-Nutzlasten verarbeiten kann.

Lösung: Umgang mit JSON-Nutzlasten

Option 1: Verwendung eines Pydantic-Modells

• Erstellen Sie ein Pydantic-Modell, um die Anfrage darzustellen Körper:

from pydantic import BaseModel

class EthAddressModel(BaseModel):
    eth_addr: str

• Ändern Sie Ihren Endpunkt, um das Pydantic-Modell zu erwarten:

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

Option 2: Verwenden des Körperparameters

• Kommentieren Sie den Parameter „ethAddress“ direkt als Körper Parameter:

from fastapi import Body

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

Option 3: Verwenden des Body(embed=True)-Modifikators

• Verwenden Sie den Body(embed=True)-Modifikator um den gesamten Anfragetext in einen einzigen zu analysieren Parameter:

from fastapi import Body

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

Geänderter JavaScript-Code

Ändern Sie Ihre JavaScript-Abrufanforderung, um den JSON-Text korrekt zu senden:

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

Fazit

Durch den Einsatz einer dieser Lösungen können Sie Ihre FastAPI aktivieren Backend, um JSON-Nutzlasten von Ihrem JavaScript-Frontend korrekt zu empfangen und zu verarbeiten, sodass Sie den Wert „ethAddress“ zum Generieren Ihres Diagramms übergeben und verwenden können.

Das obige ist der detaillierte Inhalt vonWie sende ich JSON-Daten korrekt von einem JavaScript-Frontend an ein FastAPI-Backend?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!