CodePythonreact

React+TypeScriptでaxiosでパラメータをGETとPOSTで渡す/取得する方法

Code

以前に「React+TypeScriptでaxiosでAPIからデータを取得する」という記事を作成しました。

この記事ではGETでAPI経由でjsonデータを取得して表示する、という内容となっていましたが、今回はAPIへフォームで入力したパラメータを渡す、という事をやってみたいと思います。

GETとPOSTの両方で実施するパターンを試してみます。

※こちら完成したら公開したいと思っています。

1. APIに渡すデータの例

現在、趣味でAmazonの画像一括取得ツールをAWS上で作っているので、それを例に使ってみます。

ASINというAmazonの商品コード?をAPIにPOSTで渡すとそのASINの商品にアクセスして画像を取得するという作りになっています。

data = { asin : <フォームで入力する値>}

バックエンド(AWS Lambda)については別途Pythonで構築していますが、それぞれのデータを取得方法についてもメモします。

2. フォーム部分

パラメータであるASINを入力する部分のhtml部分は以下になります。

Addボタンをクリックすると「onClickGet」関数が呼ばれるようになっています。

      <h2>Amazonの画像取得ツール</h2>
      <div>ASINを入力するとAmazonに掲載されている画像を取得します。</div>
      <div>
        <label>
          ASIN:
          <input type="text" name="asin" onChange={onChangeText} />
        </label>
        <button type="submit" onClick={onClickGet}>Add</button>
      </div>

3. Axiosでデータを渡す方法(GET)

まずはGETでの方法となります。

axios.getの第一引数にAPIのURL、第二引数に「params」を指定して渡してあげます。

 export const App = () => {
   const urlAPI = "https://xxxxx.execute-api.us-west-2.amazonaws.com/prod";
   const [text, setText] = useState<string>("")
   
 // text(ASIN)
   const onChangeText = (e: ChangeEvent<HTMLInputElement>) => {
    setText(e.target.value)
  }
  
 // Click bottun
  const onClickGet = () => {
    console.log(urlAPI)
    axios.get<[]>(urlAPI + "/asin", {
      params: {
        asin: text
      }
    }).then((res) => {
      console.log(res.data);
      setStatus(res.data);
    }).catch((error) => {
      console.log(error);
    });
  }

4. Axiosでデータを渡す方法(POST)

次にPOSTでデータを渡す方法についてです。

GETとほとんど同じですが、第二引数にそのままデータを追加しています。

また、今回はPOSTを使うと、Content-typeが”application/json”になってしまって、CORSエラーとなる対応のためにheadersも指定を追加しています。

  // Click bottun
  const onClickGet = () => {
    console.log(urlAPI)
    axios.post<[]>(urlAPI + "/asin",
      { asin: text },
      { headers: { "Content-type": "text/plain" } }
    )
      .then((res) => {
        console.log(res.data);
        setStatus(res.data);
      }).catch((error) => {
        console.log(error);
      });
  }

5. Lambda側でのデータ取得方法(GET)

今回のバックエンドはAPI Gateway+LambaのProxy統合で構築しています。

そのため、GETでのパラメータは「queryStringParameters」にデータが格納されるようになります。

asin = event["queryStringParameters"]["asin"]

6. Lambda側でのデータ取得方法(POST)

今回のバックエンドはAPI Gateway+LambaのProxy統合で構築しています。

そのため、POSTでのパラメータは「body」にjsonデータが格納されるようになります。

一旦jsonデータを取得してから各種パラメータを取り出す場合には以下の様になります。

body = json.loads(event.get('body'))
asin = body["asin"]

Pythonのオススメ勉強方法

私がオススメするPython初心者向けの最初に購入すべき書籍は「シリコンバレー一流プログラマーが教える Pythonプロフェッショナル大全です。

シリコンバレー一流プログラマーが教える Pythonプロフェッショナル大全

この書籍は実際にシリコンバレーの一流エンジニアとして活躍している酒井潤さんが書いた本です。

内容も初心者から上級者までまとめられており、各Lessonも長すぎずに分かりやすくまとめられているので、初心者の方にもおすすめです。

シリコンバレー一流プログラマーが教える Pythonプロフェッショナル大全

今回は以上となります。

コメント