Laravel×Vue.jsでaxiosを使ってAPI通信を行う方法

2022年2月11日2022年6月7日

バックエンドのフレームワークであるLaravelとフロントエンドのモダンフレームワークであるVue.jsでWebシステムを開発する場合、SPAの開発をすることが多いためにバックエンドとフロントエンドはAPI通信で非同期にデータをやり取りする場面が非常に多いです。

Laravel側ではAPI開発を行い、Vue.js側でLaravelで開発したAPIに対して非同期通信を行うことでJSONデータを取得し、表示を切り替えていきます。

この記事ではLaravelとVue.js、axiosを使ってAPI通信する方法を紹介していきましょう。

また、下記の記事でLaravelとVue.jsを連携させる方法を紹介しているので、ぜひ参考にしてみてください。

axiosとは

Vue.jsで非同期通信するのによく用いられるのがaxiosというライブラリです。

axiosとは、HTTP通信を簡単に行うことができるJavaScriptのライブラリです。

axiosを使って、非同期的にデータの送受信を行うことができます。

開発の流れ

以下の流れで開発を行なっていきます。

Laravelでデータを返すAPI開発を行う
Vue.jsでaxiosを使ってリクエストする
API通信で返ってきたレスポンスのJSONデータを表示させる

axiosでAPI通信してみよう

それでは実際に開発していきましょう。

LaravelでAPI開発

今回、開発するAPIはリクエストを受けたら、"Hello World"という文字列データを返すだけの非常にシンプルなものを開発していきたいと思います。

まずはルーティングを設定します。

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

Route::get('/hello', 'HelloController@index');

LaravelでAPI開発を行う際に、ルーティング定義はapi.phpで行います。(web.phpに記載しても動作はします。)

これで/api/helloにリクエストされた際にはHelloControllerクラスのindexアクションメソッドに処理を渡すことができます。

それではHelloControllerクラスのindexアクションメソッドで後続の処理を定義していきましょう。

<?php

namespace App\Http\Controllers;

class HelloController extends Controller
{
    public function index(): string
    {
        return 'Hello World';
    }
}

indexアクションメソッドでは前述したように"Hello World"の文字列を返すだけのシンプルな処理を定義しています。

実際には、LaravelのみでWebアプリケーション開発を行うときと同様に、リクエストに応じた分岐処理を行なったり、データベースからデータを取得してデータをレスポンスに含めたりと複雑な処理を行います。

以上でLaravelでのAPI開発は完了です。

Vue.jsでaxiosを使ってHTTP通信

次にVue.jsでaxiosを使って、先ほど開発したLaravelのAPIに対してリクエストを送信していきます。

次にaxiosをインストールしていくのですが、Laravelのpackage.jsonにはデフォルトでaxiosが定義されているので、LaravelにVue.jsをインストールした際に実行したコマンドnpm installですでにaxiosのライブラリがnode_modulesディレクトリにインストールされているはずです。

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^7.0",
        "jquery": "^3.2",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.19",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    }
}

もしaxiosがインストールされていない場合は、下記のコマンドでインストールしましょう。

npm install axios

それではVueコンポーネントでaxiosを使っていきましょう。

<template>
  <div></div>
</template>

<script>
export default {
  created() {
    this.hello();
  },
  methods: {
    async hello() {
      const res = await axios.get("/api/hello");
      console.log(res);
    },
  },
};
</script>

axiosを使ってAPIリクエストを実行しているHelloComponentを作成しました。

HelloComponentを使用できるように、app.jsに下記のコードを追記します。

Vue.component(
  "hello-component",
  require("./components/HelloComponent.vue").default
);

Vue.jsでの実装が完了したら、下記のコマンドで必ずコンパイルしましょう。

npm run dev

最後にbladeテンプレートにコンポーネントタグを追記しましょう。

<hello-component></hello-component>

これでコンポーネントのインスタンスが作成完了時にAPI通信が行われます。

該当のbladeが表示されるURLにアクセスしたデベロッパーツールのコンソールを確認してみましょう。

/api/helloにリクエスト送信されたことが確認できましたね。

JSONデータを表示

最後にAPI通信で取得したデータを表示してみましょう。

<template>
  <div>
    <h2>{{ message }}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "",
    };
  },
  created() {
    this.hello();
  },
  methods: {
    async hello() {
      const res = await axios.get("/api/hello");
      this.message = res.data;
    },
  },
};
</script>

dataメソッドにmessageを定義して、そのメッセージをブラウザに表示するように定義しています。

APIレスポンスから取得されるデータはdataオブジェクトに格納されているます。

API通信をして取得されたデータをmessageに代入することで、ブラウザに表示されるようになります。

ブラウザで確認してみましょう。