【TypeScript】ReactでGet通信・Post通信を行う方法ご紹介。

TypeScript

2021.11.07

今回の記事はTypeScriptを使ってReactでGet通信・Post通信を行う方法をご紹介する内容の記事です。初心者にも分かりやすいように環境構築から順にご紹介していきます。是非参考にしてみて下さい。

TypeScriptのReactプロジェクトを立ち上げ
Reactでhttp通信を行う方法
ReactでGet通信
ReactでPost通信

TypeScriptのReactプロジェクトを立ち上げ

nodeはすでにインストールされている前提で話を進めます。

//npx create-react-app --template typescript [プロジェクト名]

npx create-react-app --template typescript sample

「sample」としている部分がプロジェクト名を表しています。これでプロジェクトが作成できるので下記コマンドでローカルサーバが立ち上がりブラウザでアプリを確認できます。

npm start

では本題のReactでhttp通信を行う方法をご紹介していきます。

Reactでhttp通信を行う方法

Reactでhttp通信を行う方法はざっくり2つに絞られます。

axios
fetch

相違点はいくつかあります。こちらの記事に詳しくまとまっていますが、大きいところで言うと404エラーなどを簡単に捉えられる「axios」を使う方が良いと考えられます。

axiosの解説を行っていく前にどのように使用できるかですが、下記コマンドをプロジェクト内フォルダで実行します。

先ほど作成したフォルダに移動します。
cd sample

axiosのインストール
npm install axios

では実際にget通信とpost通信を行っていきます。

ReactでGet通信

ReactでGet通信を行う方法は下記です。

import axios from 'axios';

const GetSample = () => {
  axios
    .get('https://jsonplaceholder.typicode.com/posts')
    .then((results) => {
      console.log('Get通信成功');
      console.log(results.data);
    })
    .catch((error) => {
      console.log('Get通信失敗');
      console.log(error.status);
    });
  return ;
};

const PostSample = () => {
  axios
    .post('https://jsonplaceholder.typicode.com/posts')
    .then((results) => {
      console.log('Post通信成功');
      console.log(results.data);
    })
    .catch((error) => {
      console.log('Post通信失敗');
      console.log(error.status);
    });
  return ;
};

const App: React.VFC = () => {
  console.log("Get通信開始")
  GetSample();
  console.log("Post通信開始")
  PostSample();
  return (
     <div style={{ height: 400, width: '100%' }}>
       <h1>コンソールを見て下さい。</h1>
     </div>
  );
}

export default App;

これで下記でローカルサーバを立ち上げます。

npm start

こちらではGet通信の部分の解説です。

const GetSample = () => {
  axios
    .get('https://jsonplaceholder.typicode.com/posts')
    .then((results) => {
      console.log('Get通信成功');
      console.log(results.data);
    })
    .catch((error) => {
      console.log('Get通信失敗');
      console.log(error.status);
    });
  return ;
};

こちらの部分がGet通信を行っている部分です。getしてデータを取れればthenに流れていきます。get通信をするURLは便利な「https://jsonplaceholder.typicode.com/posts」です。もしgetからthenの流れの途中でエラーがあった場合はcatchで確認出来ます。

では、ブラウザでローカルサーバを立ち上げてコンソールを確認します。

[開発]→[developper tool]から[コンソール]タブを開きます。

Get通信成功の下のObjectがGetできたデータです。中身は下記のようになっていればOK。

ReactでPost通信

では次にPost通信です。先ほどのコードですでにPost通信も行っていますのでその部分だけ解説します。

const PostSample = () => {
  axios
    .post('https://jsonplaceholder.typicode.com/posts')
    .then((results) => {
      console.log('Post通信成功');
      console.log(results.data);
    })
    .catch((error) => {
      console.log('Post通信失敗');
      console.log(error.status);
    });
  return ;
};

この部分で先ほどのGet通信と同様にPost通信を行っております。

axiosは他にも非同期的に値を取ってきたり、他のUIモジュールと連携させることもあると思うので他の記事でも解説していきます。

「【TypeScript】Reactでaxiosを非同期で実行する方法ご紹介。」
「【TypeScript】Reactでaxiosを使って取得したデータをMaterialUIのdatagridviewに表示する方法ご紹介。」

では今回の記事は以上です。他にもTypeScript関連の記事を多数記載しているので是非参考にしてみて下さい。