Nuxt.jsで使うAxiosにリクエストのキャッシュ機能を組み込んでみる
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
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.js の modules に @nuxtjs/axios が指定されます。
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-extensions の cacheAdapterEnhancer を組み込みます。
まずは axios-extensions を package.jsonのdependenciesに追加します。
$ yarn add axios-extensions
次に、 plugins/axios.js ファイルを作成します。
コードは数行で、Axiosのアダプタの仕組みを利用して、cacheAdapterEnhancerを組み込むだけです。
import { cacheAdapterEnhancer } from 'axios-extensions';
export default function ({ $axios }) {
$axios.defaults.adapter = cacheAdapterEnhancer($axios.defaults.adapter);
}
このプラグインをNuxt.jsで利用するため、 nuxt.config.js の plugins に以下のように追加します。
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 のオプションにより、キャッシュアルゴリズムやキャッシュしておく時間などカスタマイズできるので、アプリの特性に合わせて調整が必要になると思います。
