Vue.jsとaxiosでAPIを叩く ( GET, POST, PUT, DELETE )

概要

本記事では、axiosを用いたAPIリクエストの基本的なことについてまとめていきます。
※Vuexについては記述しません。

環境変数

認証情報は.envファイルに記述し、認証情報が必要な場合はこちらから読み込ませて利用します。

.env

TOKEN='取得したトークン'
BASE_URL = 'リクエスト先のURL'

GET リクエスト

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

// .envファイルから環境変数(トークン・URLを読み込ませる)
var TOKEN = process.env.TOKEN
var BASE_URL = process.env.BASE_URL

export default new Vuex.Store({
  actions: {
    get_event(context,param) {
      return axios.get(BASE_URL + param, {
        headers: {
          "Content-Type": "application/json",
          "Authorization": 'Bearer ' + TOKEN
        },
        responseType: 'json',
      })
      .then(() => {
        // レスポンスが200の時の処理
        console.log("取れたよ")
      })
      .catch(err => {
        if(err.response) {
          // レスポンスが200以外の時の処理
        }
      });
    }
  }
})

　
渡すパラメータが複数の場合には、一つのオブジェクトにまとめて記述する必要があります。

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

var TOKEN = process.env.TOKEN
var BASE_URL = process.env.BASE_URL

export default new Vuex.Store({
  actions: {
    get_event(context,{ param, id }) {
      return axios.get(BASE_URL + param + id, {
        headers: {
          "Content-Type": "application/json",
          "Authorization": 'Bearer ' + TOKEN
        },
        responseType: 'json',
      })
      .then(() => {
        // レスポンスが200以外の時の処理
        console.log("取れたよ")
      })
      .catch(err => {
        if(err.response) {
          // レスポンスが200以外の時の処理
        }
      });
    }
  }
})

POST リクエスト

hoge: hogeとしているところで、引数で渡ってきたデータをRequest payloadとしてサーバー側に送信することができます。

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

var TOKEN = process.env.TOKEN
var BASE_URL = process.env.BASE_URL

export default new Vuex.Store({
  actions: {
    get_checkin_statuses(context, {param, hoge}) {
      return axios.post(BASE_URL + param, {
        hoge: hoge,
      }, {
        headers: {
          "Content-Type": "application/json",
          "Authorization": 'Bearer ' + TOKEN
        }
      })
      .then(() => {
        // レスポンスが200の時の処理
        console.log("送れたよ")
      })
      .catch(err => {
        if(err.response) {
          // レスポンスが200以外の時の処理
        }
      });
    }
  }
})

PUT リクエスト

hoge: hogeとしているところで、引数で渡ってきたデータをRequest payloadとしてサーバー側に送信することができます。

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

var TOKEN = process.env.TOKEN
var BASE_URL = process.env.BASE_URL

export default new Vuex.Store({
  actions: {
    async postCode(context,{ param, hoge }) {
      await axios.put(BASE_URL + param, {
        hoge: hoge,
      }), {
        headers: {
          "Content-Type": "application/json",
          "Authorization": 'Bearer ' + TOKEN
        }
      })
      .then(res => {
        // レスポンスが200の時の処理
        console.log("更新したよ")
      })
      .catch(err => {
        if(err.response) {
          // レスポンスが200以外の時の処理
        }
      });
    }
  }
})

DELETEリクエスト

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

var TOKEN = process.env.TOKEN
var BASE_URL = process.env.BASE_URL

export default new Vuex.Store({
  actions: {
    async delCheckin(context, param) {
      await axios.delete(BASE_URL + param, {
        headers: {
          "Content-Type": "application/json",
          "Authorization": 'Bearer ' + TOKEN
        }
      })
      .then(res => {
        // レスポンスが200の時の処理
        console.log("消しといたよ")
      })
      .catch(err => {
        if(err.response) {
          // レスポンスが200以外の時の処理
        }
      });
    },
  }
})