【Nuxt.js】axiosのリクエスト送信/レスポンス受信の共通化を行う

この記事について

axiosを使用する際に、どのHttpリクエスト送信時にも同じヘッダをつけたい場合や、Httpレスポンスハンドリングの共通化を行いたい場面があるかと思います。
この記事でNuxt.jsのpluginsを使用して、リクエスト送信/レスポンス受信の共通化を行う方法を記載したいと思います。

環境

内容	バージョン
nuxt	2.15.8
@nuxtjs/axios	5.13.6

プラグインの作成

以下のディレクトリ構成を想定します。

someProject
├pages
| └index.ts
├plugins
| └axios
|   └axios.ts
└nuxt.config.js

nuxt.jsのpluginとしてaxiosプラグインを作成します。
axiosプラグイン内には大きく4つの処理を作成しますが、それぞれ以下の内容となっております。

• onRequest...リクエスト送信時（ this.$axios.get など実行直後）に呼び出される
• onResponse...レスポンスステータスコードが200台の場合に、レスポンス取得時に実行される
• onResponseError...レスポンスステータスコードが400台や500台の場合に、レスポンス取得時に実行される
• onError...onRequestなどリクエスト送信処理でエラー発生時に実行される

plugins/axios/axios.ts

import { Context, Plugin } from '@nuxt/types';
import { AxiosResponse, AxiosError } from 'axios';

const plugin: Plugin = ({ $axios }: Context) => {
  $axios.onRequest((config) => {
    config.headers.Authorization = 'some value';
    return config;
  });
  $axios.onResponse((response: AxiosResponse) => {
    const responseBody = response.data;
    // responseBodyに関する処理
  });
  $axios.onResponseError((error: AxiosError) => {
    const response = error.response;
    // responseに関する処理
  });
  $axios.onError((error: AxiosError) => {
    const response = error.response;
    // responseに関する処理
  });
};

export default plugin;

作成したpluginを nuxt.config.js の plugins に登録します。

nuxt.config.js

export default {
  plugins: ['~/plugins/axios/axios.ts'],
}

共通化した処理の動作確認を行う

実際にaxiosを用いてHttpコールアウトを実行してみましょう。

pages/index.vue

<template>
  <button @click="callout">Callout</button>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  methods: {
    async callout() {
      await this.$axios.get('https://example.com');
    },
  },
});
</script>

レスポンスが200台の場合は、以下の順で処理が実行されます。

1. pages/index.vueの callout
2. plugins/axios/axios.tsの onRequest
3. plugins/axios/axios.tsの onResponse

レスポンスが400台や500台の場合（サーバサイドでエラーが発生した場合）は、以下の順で処理が実行されます。

1. pages/index.vueの callout
2. plugins/axios/axios.tsの onRequest
3. plugins/axios/axios.ts onResponseError

参考

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