web-dev-qa-db-ja.com

Vue.jsはaxiosでhttpリクエストをキャッシュします

Vue.jsでPWAを開発しています。ユーザーが起動すると、別のアプリケーションからの情報が必要になります。このために、私はaxiosを使用しています：

let url = 'url';
axios.get(url).then((response) => {
  callback(response.data)
})

ユーザーがオンラインである限り正常に動作しています。ネットワーク接続に問題がなければ、URLでデータを取得する必要があります。インターネット接続がない場合は、キャッシュからデータをロードする必要があります。これはどのように可能ですか？

vue.jsaxios
9
H. K.

この拡張機能を確認できます https://github.com/kuitos/axios-extensions

基本的な使用例は次のとおりです。

import axios from 'axios';
import { cacheAdapterEnhancer } from 'axios-extensions';

const http = axios.create({
    baseURL: '/',
    headers: { 'Cache-Control': 'no-cache' },
    // cache will be enabled by default
    adapter: cacheAdapterEnhancer(axios.defaults.adapter)
});

http.get('/users'); // make real http request
http.get('/users'); // use the response from the cache of previous request, without real http request made
http.get('/users', { cache: false }); // disable cache manually and the the real http request invoked
11
03balogun