web-dev-qa-db-fra.com

Vue.js cache les requêtes http avec axios

Je développe un PWA avec Vue.js. Lorsque l'utilisateur le démarre, certaines informations d'une autre application sont nécessaires. Pour cela, j'utilise axios:

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

cela fonctionne bien tant que l'utilisateur est en ligne. si la connexion réseau est OK, les données doivent être récupérées par l'URL et s'il n'y a pas de connexion Internet, les données doivent être chargées à partir du cache. Comment est-ce possible?

vue.jsaxios
9
H. K.

Vous pouvez consulter cette extension https://github.com/kuitos/axios-extensions

Voici l'exemple d'utilisation de base, j'espère que cela aide

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