react.js axiosを使用してapiを取得する

react.js axiosを使用してapiを取得する

ユーザーが利用しているIPやログイン情報などを、イントラ内にあるソフトが提供してるAPIから取得する際にreact.jsを利用して、apiを取得した際の基本的なソースです。デザインはmaterial-uiを使用してます。

環境

  • OS  CentOS Linux release 8.0.1905 (Core)
  • node V12.13.1
  • npm 6.14.2
  • React 16.13.0

react.js環境構築

下記のコマンドで構築してます。ここでは、react-appという名前でプロジェクトを作成してます。

axios・material-ui・ material-table インストール

作成したプロジェクトに移動して、今回利用したものをインストールしてます。

axios利用

src配下にGetpcinfo.jsという名前で、下記のコードで記述してます。

取得するjsonは下記のようなものです。

API取得の際、認証にBearerが必要なのでheaderに設定します。

src配下のApp.jsを下記のように編集してます。

アイコンを利用するのでpublic配下のindex.htmlにcssを追加します。

起動

起動します。

ブラウザから http://プライベートIP:3000 にアクセスすると「INFO GET」ボタンをクリックするまでは Loading されますが、ボタンを押すと情報が取得されるようになってます。

ボタンをクリックすると情報が取得されます。