axiosを使用してRestAPIを呼び出す方法【React】

■はじめに

実際にシステムを作る際には、RestAPIの実行は必須と言って良いほど、使用します。

ここでは、「axios」を使用したRestAPIの実行方法を記載します。

■手順

axiosをインストールするために、以下のコマンドを実行する

npm i axios

App.jsのソースコードの全量は以下。

import React from 'react';
import axios from 'axios';

class App extends React.Component{
  render()
  {
    function btnGetClick() {
      const data = { param : 'aa', paramtwo : 'aa' };
      axios.get('https://hogehoge.com/hoge', {params: data})
      .then((res) => {
          console.log(res);
      })
      .catch(console.error);
    }
    function btnPostClick() {
      const data = { param : 'aa', paramtwo : 'aa' };
      axios.post('https://hogehoge.com/hoge', data)
      .then((res) => {
          console.log(res);
      })
      .catch(console.error);
    }
    return (
      <div>
        <h1>Hello World</h1>
        <button onClick={btnGetClick}>GET通信</button>
        <button onClick={btnPostClick}>POST通信</button>
      </div>
    );
  }
}

export default App;

以下でaxiosのインポートをしています。

import axios from 'axios';

「btnGetClick」「btnPostClick」でそれぞれ、リクエストパラメータありのAPIの実行処理を書いています。

違いは、呼び出している関数が「get」「post」なのと、第二引数（パラメータ）の指定方法です。

「get」は以下のように、「{params: [パラメータ]}」というような書き方をする必要があります。

const data = { param : 'aa', paramtwo : 'aa' };
axios.get('https://hogehoge.com/hoge', {params: data})
.then((res) => {
  console.log(res);
})
.catch(console.error);