【React】APIへのアクセスはaxiosにおまかせ【HTTPクライアント】

こんにちは！nomurabbitです。今回はaxiosについて紹介したいと思います。

ReactアプリからHTTP通信をしてみましょう。

axiosの概要
axiosの概要のインストール
Reactコンポーネントへのimport
axiosで初めてのGET
axiosでPOSTリクエスト
まとめ
参考

axiosの概要

ReactアプリにとってAPIへのアクセスは必須の機能と言えます。今回紹介するaxiosはHTTP通信のためのパッケージです。axiosを使うことでReactアプリからAPIへのアクセスを容易に実現できます。

インストールの方法から使い方まで、順を追って解説します！

axiosの概要のインストール

まずはaxiosのインストールです。ここではnpmとyarnを使った方法を紹介します。お好きなパッケージマネージャーを使ってインストールしてみてください。

npm

$ npm install axios

yarn

$ yarn add axios

ちなみに私たちは普段yarnを使っています。

Reactコンポーネントへのimport

axiosのインストールが済んだら、Reactのコンポーネントへimportしましょう。この記事ではHome.tsxというコンポーネントへimportしています。

import React from 'react';
import axios from 'axios';
import ResponsiveDrawer from '../components/layout/ResponsiveDrawer';

const Home = () => {
  
  return (
    <ResponsiveDrawer>
      <div>
        <p>home page.</p>
      </div>
    </ResponsiveDrawer>
  );
}
  
export default Home;

axiosで初めてのGET

それでは実際にAPIへGETリクエストを送ってみましょう。ソースコードはこのようになります。

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import ResponsiveDrawer from '../components/layout/ResponsiveDrawer';

const Home = () => {

  const [msg, setMsg] = useState("");
  const apiUrl = "";

  useEffect(() => {
    if(msg !== ""){
      axios.get(apiUrl)
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    }
  },[msg]);
  
  return (
    <ResponsiveDrawer>
      <div>
        <p>home page.</p>
        <button onClick={() => setMsg("Hello nomurabbit")}>
          Click me
        </button>
      </div>
    </ResponsiveDrawer>
  );
}
  
export default Home;

この例だと、実行結果はコンソールに出力されます。ブラウザの開発者ツールなどで確認してみましょう。

axiosでPOSTリクエスト

axiosでPOSTリクエストも試してみます。axios.post()の引数に指定することでHTTPリクエストにカスタムヘッダーを組み込むことができます。

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import ResponsiveDrawer from '../components/layout/ResponsiveDrawer';

const Home = () => {

  const [msg, setMsg] = useState("");
  const apiUrl = "";

  useEffect(() => {
    if(msg !== ""){
      axios.post(apiUrl, {
        message: msg
      },{
        headers: {
          'Content-Type': "text/plain"
        },
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    }
  },[msg]);
  
  return (
    <ResponsiveDrawer>
      <div>
        <p>home page.</p>
        <button onClick={() => setMsg("Hello nomurabbit")}>
          Click me
        </button>
      </div>
    </ResponsiveDrawer>
  );
}
  
export default Home;