Reactでaxiosを超絶シンプルに使ってみる！！

2019/01/29

axios って何者？

Make XMLHttpRequests from the browser Make http requests from node.js Supports the Promise API

github/axios

ブラウザから XMLHttpRequest できるよ。 Promise 使えますよ。

Promise ってなんや？ XMLHttpRequests ってなんや？別の記事で説明します！

基本となる HTTP リクエストだけ押さえておきます。

GET メソッド

このページの情報ください！というリクエストをします。

POST メソッド

サーバーに情報を登録したい！というリクエストをします。

PUT メソッド

サーバーにある情報を編集、変更したい！というリクエストをします。

DELETE メソッド

サーバーにある情報を削除したい！というリクエストをします。

今回は GET メソッドを使用して github のプロフィールをコンソールに表示させてみましょう！ボタンをクリックするとコンソールに表示されるものになっています。

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

import './styles.css';

function App() {
  const userName = 'reo777';
  const getProfile = async () => {
    try {
      //ここでGETメソッドを使用してgithubのプロフィールを取得します。
      const result = await axios.get(
        `${'https://api.github.com/users'}/${userName}`
      );
      console.log(result);
    } catch (error) {
      //ここでリクエストに失敗した時の処理、メッセージを記述します。
      console.log('error!!');
    }
  };

  return (
    <div className="App">
      <div>
        <button onClick={() => getProfile()}>get profile!</button>
      </div>
    </div>
  );
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

結果

スクリーンショット 2019-01-29 21.24.20.png

ちなみにstatus:200はリクエストが成功しました！！というメッセージです。すぐ下にstatusText:"OK"と表示されていますね。

axios.get()に渡されている URL が存在しない場合もしっかりと404 (Not Found)とerror!!というリクエストに失敗した時のメッセージを表示してくれています。

スクリーンショット 2019-01-29 21.46.34.png

React でも Vue でも使われているライブラリなので使いこなして CRUD しましょう！