axiosをrailsと通信するときのリクエストヘッダーを共有化する自分メモ

環境

  • rails (5.2.0.rc1)
  • @rails/webpacker (3.2.1)
  • axios (0.17.1)

rails, axiosは導入済みとします

内容

app/javascript/packs/axios.js
import { Axios as AxiosRoot } from 'axios'

export default new class Axios extends AxiosRoot {
  constructor () {
    super({
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content
      }
    })
    return this
  }
}

一旦AxiosRootでオリジナルをインポートしてから、extendsした新しいAxiosクラスにhadersを定義するという感じです
後は拡張したファイルを使う場所でimportして使うだけです

app/javascript/packs/items.js
import Vue from 'vue/dist/vue.esm'
import axios from './axios'

export default {
  name: 'ItemList',

  props: {
    url: {
      type: String,
      required: true
    }
  },

  data () {
    return {
      items: []
    }
  },

  created () {
    this.asyncItems()
  },

  methods: {
    asyncItems () {
      axios.get(this.url).then(response => {
        this.items = response.data
      }).catch(error => {
        console.log(error)
      })
    }
  }
}

参照

https://github.com/axios/axios/issues/391
https://qiita.com/sukechansan/items/738b4bdaffc07c337a70

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.