ReactでAPIを叩く方法(バックエンドはLaravel)

スポンサーリンク

ReactでAPIを叩く方法をメモとして残します。

前提条件

・バックエンド(API提供元)はLaravelで実装する。

完成イメージ

作成するのはとてもシンプルなものです。

APIを叩くと天気の情報を返すアプリになります。

天気はランダムに「晴、曇、雨」の中から選ばれます。

ソース

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

class Example extends React.Component {
  
  constructor(props) {
    super(props);
    
    this.state = {
      result: '',
    };

    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();

    axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
    axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    axios
      .get('{ドメイン}/api/sampleApi')
      .then((results) => {
        this.setState({"result": results.data.response})
      },
      )
      .catch((error) => {
        this.setState({"result": "error"})
      });
  }

  render() {
    return (
    <center>
        <form onSubmit={this.handleSubmit}>
            <button type="submit" className="btn btn__size_dynamic" value="Submit">実行</button>
        </form>
        { this.state.result }
    </center>
    );
  }
}

export default Example;

if (document.getElementById('example')) {
    ReactDOM.render(<Example />, document.getElementById('example'));
}

20〜30行目がapiを叩いている部分になります。

20,21行目はcsrf用のトークンをセットしています。これがないとエラーになります。

23行目でリクエスト先を指定しています。

今回はGETですが、POSTの場合はgetの部分をpostに書き換えてください。

24〜26行目はレスポンスが正常に返ってきた場合に実行させたい処理を記述しています。

今回はレスポンス内容をそのままstateに格納しています。

28〜30行目はレスポンスが異常だった場合に実行させたい処理を記述します。

36〜38行目はリクエスト送信用のボタンです。

39行目はstateの内容を画面に描画しています。

JavaScript Laravel React
スポンサーリンク
エンジニアの日記

コメント