Zenn
💈

PythonでREST APIを作りJavaScriptで呼び出すサンプル

2022/06/03に公開
JavaScript
Python
API
FastAPI
tech

サンプルがあると便利なので残すことに

  • PythonのFastAPIならさくっとREST APIが作れると聞いて作ってみました。
  • 作ったAPIをJavaScriptで呼び出せるらしいので試してみました。
  • APIからの値を取得するには非同期処理というものが必要らしくasync/awaitで実装できるらしい。

ということがわかったので忘れないようにサンプルスクリプトを残します。（"忘れても思い出せるように…"が正しいかも）

作ったサンプルを図で説明しておく

バージョン情報はこれ

バージョン確認
PS C:\> python --version
Python 3.10.4
PS C:\> pip list | Select-String -Pattern fast

fastapi           0.78.0
PS C:\> pip list | Select-String -Pattern uvicorn

uvicorn           0.17.6

参考にしたサイト

環境の準備

FastAPIのインストール

FastAPIのインストール
pip install fastapi uvicorn

スクリプトのサンプル

サンプルファイルは２つ

  • restapi-sample.py
    • Pythonスクリプトで作るAPI
  • callapi-sample.html
    • APIを呼び出し値を取得するJavaScript
restapi-sample.py
from fastapi import FastAPI
from starlette.middleware.cors import CORSMiddleware # CORS

app = FastAPI()

# CORS
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"]
)

@app.get("/")
async def hello():
    dt_now = datetime.datetime.now()
    print(dt_now)
    return {"message" : "TEST DESU YO!!", "date" : dt_now}
callapi-sample.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>RESTAPI ACCESS TEST</title>
</head>

<script>

async function callApi() {
  const res = await fetch('http://127.0.0.1:8000')
      .then(result => result.json())
      .then((output) => {
          console.log('Output: ', output);
          let tmpVal = output["date"];
          console.log( String(tmpVal) );
        }).catch(err => console.error(err));
};

callApi();

</script>
</html>

実行方法

0.スクリプトを準備する

スクリプトを以下のように格納しました。

ディレクトリ構成
PS C:\Users\hogeusr\data-local\Python\FastAPI> dir


    ディレクトリ: C:\Users\hogeusr\data-local\Python\FastAPI


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-a----        2022/06/03      6:47            618 callapi-sample.html
-a----        2022/06/02      7:37            859 restapi-sample.py

1.REST APIを開始する

PowerShellを起動しサンプルスクリプトがあるパスをカレントディレクトリとしてuvicorn restapi-sample:app --reloadを実行します。（--reloadはデバッグオプション）

REST API開始
PS C:\Users\hogeusr\data-local\Python\FastAPI> uvicorn restapi-sample:app --reload
INFO:     Will watch for changes in these directories: ['C:\\Users\\hogeusr\\data-local\\Python\\FastAPI']
INFO:     Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)
INFO:     Started reloader process [9956] using statreload
WARNING:  The --reload flag should not be used in production on Windows.
INFO:     Started server process [13788]
INFO:     Waiting for application startup.
INFO:     Application startup complete.

※余談※
uvicorn test01:app --host 0.0.0.0 --reloadとすると、同じネットワーク内の他の端末からアクセスできます。

2.(オプション)Webサーバーを起動する

手順1.とは別に新たにPowerShellを起動しサンプルスクリプトがあるパスをカレントディレクトリとしてpython -m http.server 8080を実行します。

Webサーバ起動
PS C:\Users\hogeusr\data-local\Python\FastAPI> python -m http.server 8080
Serving HTTP on :: port 8080 (http://[::]:8080/) ...

3.REST APIを呼び出し値を取得する

callapi-sample.htmlをダブルクリックで実行するとREST APIを呼び出し値を取得します。
手順 2. を実施した場合はブラウザでURL http://127.0.0.1:8080/callapi-sample.html を開いても同様の挙動になります。

callapi-sample.htmlを開くとログブラウザが起動し真っ白な画面が表示されます。ブラウザのデバッグモードを起動(F12キーで起動)し、コンソールログにREST APIから受信した値が記録されたら成功です。

――――――――――――――――――――

サンプルを残せたので忘れても問題なし

Discussion