Swagger UI 없이 JSON 데이터를 FastAPI 엔드포인트로 보내는 방법은 무엇입니까?

FastAPI에서 JSON 데이터 게시를 위한 Swagger UI 우회

Swagger UI(OpenAPI)는 API 엔드포인트를 테스트하는 편리한 방법을 제공하지만 필요한 시나리오가 있을 수 있습니다. JSON 데이터를 사용하지 않고 직접 전송합니다. 이 기사에서는 JavaScript 인터페이스를 사용하여 JSON 데이터를 FastAPI 엔드포인트에 게시하는 솔루션을 제공합니다.

이를 달성하기 위해 JSON 형식으로 데이터를 보낼 수 있는 Fetch API를 활용합니다. 또한 Jinja2Templates를 사용하여 프런트엔드용 템플릿을 생성할 것입니다.

백엔드 구현

app.py에서 FastAPI 애플리케이션은 항목 모델로 POST 요청을 허용하는 / 엔드포인트로 정의됩니다. .

<code class="python">from fastapi import FastAPI, Request, HTTPException
from fastapi.templating import Jinja2Templates
from pydantic import BaseModel

class Item(BaseModel):
    name: str
    roll: int

app = FastAPI()
templates = Jinja2Templates(directory="templates")

@app.post("/")
async def create_item(item: Item):
    if item.name == "bad request":
        raise HTTPException(status_code=400, detail="Bad request.")
    return item

@app.get("/")
async def index(request: Request):
    return templates.TemplateResponse("index.html", {"request": request})</code>

프런트엔드 구현

index.html 템플릿에는 이름 및 롤 데이터를 입력할 수 있는 HTML 형식이 제공됩니다. submitForm() 함수는 Fetch API를 사용하여 데이터를 JSON으로 보냅니다.

<code class="html">

  
    <h1 id="Post-JSON-Data">Post JSON Data</h1>
    <form method="post" id="myForm">
      name : <input type="text" name="name" value="foo">
      roll : <input type="number" name="roll" value="1">
      <input type="button" value="Submit" onclick="submitForm()">
    </form>
    <div id="responseArea"></div>
    <script>
      function submitForm() {
        var formElement = document.getElementById("myForm");
        var data = new FormData(formElement);
        fetch("/", {
          method: "POST",
          headers: {
            "Accept": "application/json",
            "Content-Type": "application/json",
          },
          body: JSON.stringify(Object.fromEntries(data)),
        })
        .then(resp => resp.text())
        .then(data => {
          document.getElementById("responseArea").innerHTML = data;
        })
        .catch(error => {
          console.error(error);
        });
      }
    </script>
  
</code>

Usage

프런트엔드에 액세스하려면 http://localhost:8080/으로 이동하세요. 양식에 데이터를 입력하고 "제출" 버튼을 클릭하세요. / 엔드포인트의 응답은 HTML의 "responseArea" div에 표시됩니다.

표시된 것처럼 .catch() 메서드를 사용하여 JavaScript 코드의 엔드포인트에서 발생한 예외를 처리할 수 있습니다. 예를 들어요.

위 내용은 Swagger UI 없이 JSON 데이터를 FastAPI 엔드포인트로 보내는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!