Nuxt.jsでaxiosの共通処理を作成し、API呼び出し処理をラップして使用する

Nuxt.jsでAPIを叩くとき、共通のヘッダーとか設定したいですよね？
さらにAPIの呼び出しをラップして、 api.getUser(1) みたいな感じで使いたかったので、いろいろ試した際の備忘録です。
酔っ払いながら試したので、忘れないうちにメモっておきます。

ということで今回は、下記を目的としています。

• APIを叩く際に共通のAuthorizationヘッダーを付ける
• APIの呼び出し処理をラップして、Component内でより手軽に呼び出させるようにする

ディレクトリ構成

/plugins 内に、下記のような構成でファイルを置きます。

plugins
└─ axios
    ├─ modules
    │   ├─ user.js   # user関係のAPI処理
    │   ├─ hoge.js   # hoge関係のAPI処理
    │   └─ fuga.js   # fuga関係のAPI処理
    └─ index.js      # 共通処理の記述

user.js とか hoge.js とかファイルを分けていますが、関連するAPIの処理をファイル毎にまとめたかったのでこんな感じにしてます。

nuxt.config.js に設定を追加

nuxt.config.js のpluginsの箇所に追加

nuxt.config.js

  plugins: [
    '@/plugins/axios/index'
  ],

axios 共通処理部分の作成

axiosで共通処理を作成するには、Interceptorsという機能を使います。

plugins/axios/index.js

export let axios;

export default ({ store, $axios }) => {

  $axios.defaults.baseURL = 'https://api.hoge/'

  $axios.onRequest(config => {
    config.headers.common['Authorization'] = `Bearer token`;
    config.headers.common['Accept'] = 'application/json';
  });

  $axios.onResponse(response => {
    return Promise.resolve(response);
  })

  $axios.onError(error => {
    return Promise.reject(error.response);
  });

  axios = $axios;
}

Auth Moduleを使用して、Authorizationヘッダーに付けるトークンをstoreに保存しておくと、いい感じに実装できると思います。
参考：Nuxt.jsでAuth Moduleを使ってログイン機能を実装する

APIを呼び出す部分の作成

とりあえず、特定のユーザーを取得する getUser と、ユーザー一覧を取得する getUsers という処理を作成するものとします。
user関係の処理なので、 user.js にまとめようと思います。

plugins/axios/modules/user.js

import { axios } from '../index.js';

export default {
  getUser(id) {
    return axios.$get(`users/${id}`)
  },

  getUsers() {
    return axios.$get(`users`)
  }
}

plugins/axios/index.js でexportした axios をimportして使用しています。

実際にComponent内で利用する

上記で作成した getUser をComponent内で使用したい場合は、例えば下記のように関数を定義して呼び出すことができます。

pages/index.vue

<script>
import UserApi from '@/plugins/axios/modules/user'
export default {
  methods: {
    getUser(id) {
      UserApi.getUser(id).then((response) => {
        console.log(response)
      }).catch((error) => {
        console.log(error)
      })
    }
  }
}
</script>

以上でやりたかったことはできました！

もっと効率良くできるよーなどアドバイスあれば、ぜひ教えてください！