Nuxt.jsで使うAxiosにリクエストのキャッシュ機能を組み込んでみる

Nuxt.js製のアプリで利用しているaxios-moduleでリクエストのキャッシュをしたかったので、Axiosをaxios-extensionsで拡張してキャッシュできるようにしてみました。
2020.02.29

Nuxt.js製のアプリで利用しているaxios-moduleでリクエストのキャッシュをしたかったので、Axiosを拡張してそれをできるようにしてみました。

なお、今回試したソースコードの一式はこちらにあります。
https://github.com/shoito/try-axios-cache

create-nuxt-appでベースとなるNuxt.jsアプリを作る

ここではcreate-nuxt-appコマンドで、try-axios-cacheという名前のアプリを作ります。

$ npm i -g create-nuxt-app
$ create-nuxt-app try-axios-cache

ここで重要なのが、create-nuxt-appでNuxt.jsアプリの雛形を作る際に、モジュールの選択で Axios を選択することです。

$ create-nuxt-app try-axios-cache

create-nuxt-app v2.12.0
✨  Generating Nuxt.js project in try-axios-cache
? Project name (try-axios-cache)
➜  Workspaces clear
➜  Workspaces create-nuxt-app try-axios-cache

create-nuxt-app v2.12.0
✨  Generating Nuxt.js project in try-axios-cache
? Project name try-axios-cache
? Project description My prime Nuxt.js project
? Author name shoito
? Choose the package manager Yarn
? Choose UI framework None
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Axios
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose test framework None
? Choose rendering mode Single Page App
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selectio
n)

🎉  Successfully created project try-axios-cache

  To get started:

	cd try-axios-cache
	yarn dev

  To build & start for production:

	cd try-axios-cache
	yarn build
	yarn start

モジュールにAxiosを選択することで、 nuxt.config.jsmodules@nuxtjs/axios が指定されます。

nuxt.config.js

modules: [
    '@nuxtjs/axios',
  ],
  axios: {
  },

このようにaxios-moduleがセットアップされた状態になっています。 雛形が出来上がったので、 yarn dev を実行すると http://localhost:3000/ でアプリケーションが起動します。

$ cd try-axios-cache
$ yarn dev

Axiosにキャッシュの仕組みを入れる

Axios Module のページ Extending axios で紹介されているように、Nuxtのプラグインの仕組みでAxiosを拡張できるので、プラグインから axios-extensionscacheAdapterEnhancer を組み込みます。

まずは axios-extensions を package.jsonのdependenciesに追加します。

$ yarn add axios-extensions

次に、 plugins/axios.js ファイルを作成します。
コードは数行で、Axiosのアダプタの仕組みを利用して、cacheAdapterEnhancerを組み込むだけです。

plugins/axios.js

import { cacheAdapterEnhancer } from 'axios-extensions';

export default function ({ $axios }) {
  $axios.defaults.adapter = cacheAdapterEnhancer($axios.defaults.adapter);
}

このプラグインをNuxt.jsで利用するため、 nuxt.config.jsplugins に以下のように追加します。

nuxt.config.js

plugins: [
    '~/plugins/axios',
  ],

Axiosのリクエストがキャッシュされるか試してみる

このサンプルプログラムでは、 Click! ボタンか Click! - cache:false ボタンを押下すると、Dog APIからランダムで取得した犬の写真を表示します。

Click! ボタンの場合は、キャッシュが有効なので、Axiosのリクエスト結果を5分間(デフォルト)キャッシュします。
そのため、ボタンを何度か押下しても犬の写真は変化しません。

Click! - cache:false ボタンの場合は、 axios.get(URL, {cache: false}) のようなリクエストとなり、キャッシュを無効としています。そのため、ボタンを押下する度に犬の写真は変化します。

Google Chromeのデベロッパーツールで確認すると、前者の場合はリクエストが送られていないことが分かります。

さいごに

Axiosのアダプタ、Nuxt.jsのプラグインにより、Axiosからのリクエストに横断的にキャッシュ機能を組み込むことができました。
axios-extensions では cacheAdapterEnhancer のオプションにより、キャッシュアルゴリズムやキャッシュしておく時間などカスタマイズできるので、アプリの特性に合わせて調整が必要になると思います。