vueで非同期通信を行う際に手段はいろいろとありますが、axiosの使用が推奨されているようです。
CDNでの導入方法はたくさんありましたが、vue-cliでの導入に手こずったため備忘録としての記事になります。
環境
- windows10
- @vue/cli 4.0.4
- npm -version 6.12.0
- node -v v10.16.3
前提
すでにnode・npm・vue-cli環境が整っており、vueプロジェクトが存在していること
手順
axiosとvue-axiosをインストール
以下コマンドを実行
npm install --save axios vue-axios
main.jsにてインポート
vue-axiosにはエントリーファイルにて設定を行うように記載されています。
エントリーファイルの意味が完全に理解できていませんが、特に設定を弄っていなければmain.jsが最初に呼ばれているはずなのでここにインポートを記載します。
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios' //追記
import VueAxios from 'vue-axios' //追記
Vue.config.productionTip = false
Vue.use(VueAxios, axios) //追記
new Vue({
router,
render: h => h(App)
}).$mount('#app')
設定としては以上になります。これでaxiosを使用できるようになっているはずです。
使い方
hoge.vue
<template>
<div id="search-ip">
<div>
<div>
<input @click="getIp" type="button" value="IPを取得">
</div>
</div>
</div>
</template>
<script>
export default {
name: 'SearchIp',
methods: {
getIp() {
this.axios.get('https://httpbin.org/get')
.then((response) => {
alert(response.data.origin);
})
.catch((e) => {
alert(e);
});
}
}
}
</script>
IPアドレスを取得してアラート表示させる簡単なスクリプトになります。
this.axios.get()のところで非同期通信を行っています。
2021/01/25 追記
設計面ではこちらの方が優れているので合わせて確認していただけるといいと思います。
https://qiita.com/right1121/items/166f67cab861b31d3216