概要

vue-axios を使うと簡単に HTTP 通信を実現することができます
今回は GET のサンプルを紹介します
またプロジェクトには vuetify を適用しています

環境

macOS 10.15.6
nodejs 14.5.0
yarn 1.22.4
vue cli 4.4.6
vuetify (vue-cli-plugin-vuetify) 2.0.7
vue-axios 2.1.5

axios インストール

yarn add axios
yarn add vue-axios

axios を使用する設定

vim src/main.js

import Vue from "vue";
import axios from "axios"; // add
import VueAxios from "vue-axios"; // add
import App from "./App.vue";
import vuetify from "./plugins/vuetify";

Vue.config.productionTip = false;

Vue.use(VueAxios, axios); // add

new Vue({
  vuetify,
  render: h => h(App)
}).$mount("#app");

HelloWorld.vue の編集

vim src/components/HelloWorld.vue

<template>
  <v-container>
    <v-row>
      <v-col>
        <button v-on:click="getRequest">{{ button.name }}</button>
      </v-col>
    </v-row>
    <v-row>
      <v-col>
        <div>Name: {{ name }}</div>
        <div>Rate: {{ rate }}</div>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",

  data: () => ({
    button: {
      name: "Get data"
    },
    name: "",
    rate: ""
  }),
  methods: {
    getRequest: function() {
      this.axios
        .get("https://api.coindesk.com/v1/bpi/currentprice.json")
        .then(
          response => (
            (this.name = response.data.chartName),
            (this.rate = response.data.bpi.USD.rate)
          )
        );
    }
  }
};
</script>

動作確認

yarn lint
yarn serve

軽く解説

まずは axios をプロジェクトで使えるようにする必要があります
npm or yarn でインストールしたあとに main.js で import しましょう
そして Vue.use を使って axios を Vue コンポーネントで使えるようにします

今回は v-on:click のイベントで getRequest メソッドがコールするようにしています
その中で axios を呼び出しています
GET の場合は .get に URL を指定するだけです
あとは Promise の .then で結果を待って結果が来たら Vue コンポーネントに予め定義しておいた name, rate にそれぞれデータを設定するだけです
今回はレスポンスが JSON で返ってくるので簡単に参照できていますがそうでない場合は少し工夫が必要です

また CORS は考慮していないのでサーバ側で CORS 対応していない場合には通信エラーになります

参考サイト

https://jp.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

hawksnowlog

2020年7月25日土曜日

Vue で HTTP 通信するサンプルコード (axios 編)

概要

環境