Comment envoyer correctement des données JSON d'un frontend JavaScript vers un backend FastAPI ?

Publication de données JSON du frontend JavaScript vers le backend FastAPI

Comprendre le problème

Vous rencontrez des erreurs lorsque vous tentez de transmettez une charge utile JSON de votre interface JavaScript à votre backend FastAPI. Plus précisément, vous essayez de transmettre une valeur « ethAddress » à partir d'un formulaire de saisie client pour générer un graphique.

Résoudre le problème

L'erreur se produit car votre FastAPI Le point de terminaison attend le paramètre « ethAddress » en tant que paramètre de requête plutôt que dans le cadre du corps JSON. Par conséquent, la solution réside dans la modification de votre point de terminaison FastAPI pour gérer les charges utiles JSON.

Solution : gestion des charges utiles JSON

Option 1 : utilisation d'un modèle Pydantic

• Créer un modèle Pydantic pour représenter la demande body :

from pydantic import BaseModel

class EthAddressModel(BaseModel):
    eth_addr: str

• Modifiez votre point de terminaison pour attendre le modèle Pydantic :

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

Option 2 : Utilisation du paramètre Body

• Annoter directement le paramètre "ethAddress" en tant que corps paramètre :

from fastapi import Body

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

Option 3 : Utiliser le modificateur Body(embed=True)

• Utiliser le modificateur Body(embed=True) pour analyser l'intégralité du corps de la requête en un seul paramètre :

from fastapi import Body

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

JavaScript modifié Code

Modifiez votre requête de récupération JavaScript pour envoyer correctement le corps JSON :

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

Conclusion

En employant l'une de ces solutions , vous pouvez activer votre backend FastAPI pour recevoir et traiter correctement les charges utiles JSON de votre interface JavaScript, vous permettant ainsi de transmettre et d'utiliser la valeur « ethAddress » pour générer votre graphique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!