Bagaimana untuk Menghantar Data JSON dengan Betul dari Frontend JavaScript ke Backend FastAPI?

Menyiarkan Data JSON daripada JavaScript Frontend ke FastAPI Backend

Memahami Isu

Anda menghadapi ralat semasa cuba lulus muatan JSON dari bahagian hadapan JavaScript anda ke bahagian belakang FastAPI anda. Khususnya, anda cuba menghantar nilai "ethAddress" daripada borang input klien untuk menjana carta.

Menangani Isu

Ralat berlaku kerana FastAPI anda endpoint menjangkakan parameter "ethAddress" sebagai parameter pertanyaan dan bukannya sebagai sebahagian daripada badan JSON. Oleh itu, penyelesaiannya terletak pada mengubah suai titik akhir FastAPI anda untuk mengendalikan muatan JSON.

Penyelesaian: Mengendalikan Muatan JSON

Pilihan 1: Menggunakan Model Pydantic

• Buat model Pydantic untuk mewakili permintaan badan:

from pydantic import BaseModel

class EthAddressModel(BaseModel):
    eth_addr: str

• Ubah suai titik akhir anda untuk mengharapkan model Pydantic:

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

Pilihan 2: Menggunakan Parameter Badan

• Secara langsung anotasi parameter "ethAddress" sebagai badan parameter:

from fastapi import Body

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

Pilihan 3: Menggunakan Pengubahsuai Body(embed=True)

• Gunakan pengubah Body(embed=True) untuk menghuraikan keseluruhan badan permintaan menjadi satu parameter:

from fastapi import Body

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

Kod JavaScript Diubah Suai

Ubah suai permintaan pengambilan JavaScript anda untuk menghantar badan JSON dengan betul:

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

Kesimpulan

Dengan menggunakan salah satu daripada penyelesaian ini, anda boleh mendayakan bahagian belakang FastAPI anda untuk menerima dan memproses muatan JSON dengan betul daripada bahagian hadapan JavaScript anda, membolehkan anda menghantar dan menggunakan nilai "ethAddress" untuk menjana carta anda.

Atas ialah kandungan terperinci Bagaimana untuk Menghantar Data JSON dengan Betul dari Frontend JavaScript ke Backend FastAPI?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!