axiosを使ってフロントエンドからバックエンドのAPIを叩く

こんにちは。フロントエンドリスキリングおじさんです。
今回は掲題について取り組みます。

前提情報

実施時期

2023年3月

実行環境

フロントエンド

node.js: 18.15.0
言語: TypeScript + React + MUI

バックエンド

言語: Java17 + Spring boot

作成物の仕様

バックエンドのREST API

URI: "/api/hello"
レスポンス：以下のJSONを固定で返します。

{
	"jpn": "こんにちは",
	"eng": "hello"
}

こちらの実装については省略します。

フロントエンド

バックエンドのAPIを叩いて、レスポンスを画面表示させる
ただし、レスポンスが返ってくるまではローディング画面を表示させておきたい！

実装

import { CircularProgress, Typography } from "@mui/material";
import axios from "axios";
import React, { useEffect, useState } from "react";

// APIのレスポンスの型を宣言
type Greet = {
  jpn: string;
  eng: string;
};

function App() {
  const [greet, setGreet] = useState<Greet>(); // Stateに持っておく　初期値はundefined
  const url = "http://localhost:8081/api/hello"; // バックエンドAPIのURL

  useEffect(() => {
    axios.get(url).then((response) => {
      setGreet(response.data); // APIのレスポンスをgreetに詰める
    });
  }, []); // 第二引数の配列に入れた変数が更新されるたび、第一引数の内容が再実行される。今回は再実行の必要は無いので空

  if (greet == null) {
    // greetが空の場合はぐるぐるローディング画面を流す
    return (
      <div className="loading">
        <Typography variant="h1"></Typography>
        <CircularProgress />;
      </div>
    );
  }

  return (
    <div className="greet">
      <div className="greet-japanese">
        <Typography variant="body1">{greet?.jpn}</Typography>
      </div>
      <div className="greet-english">
        <Typography variant="body1">{greet?.eng}</Typography>
      </div>
    </div>
  );
}

export default App;

動かしてみる

普通に実行

npm start を実行し、localhost:3000にアクセスしてみます。

無事、表示されました。

バックエンドのレスポンス返却を止めてみる

デバッグモードでレスポンス返却部分にブレークポイントを張って、
ページを更新してみます。

すると、挨拶文は表示されず、ぐるぐるだけが表示されています。

レスポンス返却を再開

バックエンドのブレークポイントを破棄してみます。

再度、挨拶文が表示されました。

この実装の問題点

バックエンドのホストが固定やないかい！

次回、相対的にアクセスできるようにします。

次回

この記事で、Nginxを使ってフロントエンドとバックエンドを連携させます。