NS高所属の @tester_ringo です。
たまにpythonで何かしらを書く程度の者です。

私はwebに関してほとんど知識がありませんが、最近私の中でwebの需要が高まっていました。
けれど何から勉強を行えばいいのかわからず、ひとまず何か作ろうと思いたちました。
その過程で行ったPOST通信の備忘録です。初心者向けです。
しかし、明確に説明できるほどの知識がないため解説はありません。
よって初心者向けでもないです。（ターゲット不明。

何かしらの手助けとなれれば幸いです。

目的

Fast APIでpythonとjavascriptからPOST通信を行う事。
詳細などは調べればすぐに出てくるため、手順のみ。

環境

python 3.11.2
javascript
windows

0. 準備

pipを用いて各種ライブラリのインストール

Fast API
uvicorn
pydantic
requests

pip install fastapi uvicorn pydantic requests

1. 起動

ファイル構成

fast_api/
└main.py

簡易的なサーバファイルの作成。
Fast APIと調べると真っ先に出てくる。

main.py

from fastapi import FastAPI

app = FastAPI()

# get
@app.get("/")
async def root():
    return {"return" : "message"}

ターミナルから起動。（カレントディレクトリへの移動を忘れずに

uvicorn main:app --reload

2. POST通信(pythonから)

サーバファイルにpostメソッドの処理の追加。
後々のために一度CORSを無効化する。（1敗

main.py

import random
from fastapi import FastAPI
from pydantic import BaseModel

class Name(BaseModel):
    name: str

app = FastAPI()

# 後のためのCORS回避
origins = ["*"]
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# get
@app.get("/")
async def root():
    return {"response" : "message"}

# psot
@app.post("/")
async def new_naming(req: Name):
    name = req.name
    new_name = name.upper()[random.randint(0, len(name)-1)]
    return {"response": f"油屋の長によるとあなたの名前は今日から「{new_name}」らしい。"}

お試し通信フ用ァイルを用意し、実行。

req.py

import requests
import json

url = "http://127.0.0.1:8000/" #localhost
data = {"name" : "山田太郎"}

response = requests.post(url, json.dumps(data))
print(response.json())

実行結果

$ python req.py
{'response': '油屋の長によるとあなたの名前は今日から「山」らしい。'}

3. POST通信(javascriptから)

簡単にjsからもpostを試してみる。（ブラウザ使用。
非同期処理によりjs初めての人には多少ややこしくなっている。（私
詳しく知りたい場合は非同期処理やpromiseなどを検索すると良い。
(ちなみにheaderのcontent typeを知らず1敗

req用エセ.html

<h1 id="result">result</h1>
<script>
async function test_post(url, name) {
    const response = await fetch(url, {
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify({
            "name": name
        })
    });
    const result = await response.json();
    return result["response"];
};

test_post("http://127.0.0.1:8000/", "山田太郎").then((result) => { //レスポンス後の処理.
    const label = document.getElementById("result");
    label.textContent = result;
});
</script>

ブラウザの表示結果

終わり。