vue cliのプロジェクトにaxiosを読み込む方法

備忘録です。

したいこと

・vue cliのプロジェクトでHTTP Requestを行いたい

方法

vue.jsにはHTTP Requestをする機能が備わっていないので、HTTP RequestができるようJavascriptのライブラリを読み込む必要があります。簡単にHTTP Requestを行えることからaxiosが多くの人に好まれているようです。

まずはaxiosをプロジェクトにインストールします。

ステップ1

プロジェクト内のターミナルからaxiosをインストール👇
(npmはすでにインストール済みと仮定します)
補足：Visual Studio Codeを使用している場合、プロジェクトファイルを開いた状態で表示 👉 ターミナルに行くと、ターミナルが開けます。私の場合は、vuejsというファイルがプロジェクトファイルなので、そのなかにaxiosをインストールします。

USER-no-MacBook-Air-2:vuejs user$　npm install axios

数秒待つとインストールされます。

ステップ2

使用するためにはインストールするだけでなく、インポートする必要があります。プロジェクト内で使えるようにするにはmain.js内にインポートします。

main.jsファイル内

import Axios from 'axios'
Vue.use(Axios)

ステップ3

さらにcomponentsのなか、あるいはrootとなるapp.vueなどで使う場合は、そこにもインポートする必要があります。

app.vue内など、HTTP Requestを行いたいvueファイルの中

<script>
import axios from 'axios';//ここで読み込む

export default {
  data() {
    return {
        //
    } 
  },
 methods: {
        //
    }
    }
         
 }
</script>

これで使える状態になります。

補足: .getして情報を画面に表示させる

ここではJSON Placeholderというダミーテキストを返してくれるAPIサーバーを例に説明します。ここではJSON Placeholderの/postsを使います。

たとえば#showBlogsというdivのなかにある、<h2></h2> には JSON Placeholder/postsのtitle を、<article></article>には JSON Placeholder/postsのbody を表示したい場合。

.getメソッドで情報を取得しなければいけません。そのためにはcreated(){}をexport default内に使います。

<template>
  <div id="showBlogs">
      <h1>Blog Articles</h1>
      <div v-for="(blog, idx) in blogs" v-bind:key="idx" class="single-blog">
          <h2>{{ blog.title }}</h2>//ここで情報を表示する
          <article>{{ blog.body }}</article>//ここで情報を表示する
      </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
        blogs:[]
    }
  },
  methods: {
  //
  },
  created(){
      axios.get('https://jsonplaceholder.typicode.com/posts').then(response => {
          this.blogs = response.data
      })//ここで情報をくれ〜〜〜というリクエストをする
}
}
</script>

このようにして私は無事画面に情報を表示することができました。とはいえ初心者なので何かあればご指摘いただけると幸いです🙇‍♀️