Vue.js cache http requests with axios

Question

I'm developing a PWA with Vue.js. When the user starts it, some information from another application is needed. For this, i'm using axios:

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

it's working fine as long as the user is online. if the network connection is OK, data should be retrieved by the URL, and if there is no internet connection, data should be loaded from cache. How is this possible?

Answer 1

You can check out this extension https://github.com/kuitos/axios-extensions

Here is the basic usage example, I hope it helps

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