Discussion :

[cilies38000]

Bonjour,


Je travaille sur un code JS pour mettre en cache des réponses de requêtes GET de l'api PIXABAY. Mais, la méthode de cache que j'utilise n'a pas l'air de vouloir enregistrer les résultats. Pourtant d'après ce que j'ai pu lire ça devrait être bon je pense. Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
if ('caches' in window) {
  const newCache = await window.caches.open('cache-pixabay');
 
  const options = {
    method: "GET",
    headers: new Headers({
      'Accept': 'application/json',
    }),
  }
 
  let request = new Request(URL, options);
  datas = await newCache.match(request);
  alert(JSON.stringify(datas));
  if (isEmptyObj(datas)) {
    alert('iciii');
    await newCache.add(request);
    datas = await newCache.match(request);
    alert(JSON.stringify(datas));
  }
 
} else {
  xhttp.open("GET", URL, false);
  xhttp.send();
  datas = JSON.parse(xhttp.responseText);
}

Alert affiche toujours un objet vide {}. Je ne trouve pas trop d'exemples sur le net. Si quelqu'un sait ce qui ne va pas dans mon code ?
Merci.

[NoSmoking]

Bonjour,

Je travaille sur un code JS pour mettre en cache des réponses de requêtes GET...

il existe plusieurs moyens de faire cela comme par exemple avec local-session storage, l’utilisation du cache étant le plus souvent utilisé avec les services workers.

Ceci étant j'ai du mal à comprendre ton code quand on voit, par exemple, un xhttp.open complétement inutile ici.

Que cherches-tu à faire réellement, vérifier que les données sont en cache ?

Pour les mettre en cache il te suffit juste de faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
caches.open(cachename)
  .then((cache) => {
    cache.add(url)
      .then(() => {
        console.log("data en cache")
      })
  });

à partir de ce moment là tes données étant en cache si tu veux les utiliser tu pourrais avoir une fonction de lecture comme par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const readCache = (cachename, callback) => {
  caches.open(cachename)
    .then((cache) => {
      cache.match(url)
        .then((response) => {
          if (response) {
            // on suppose qu'il s'agit de JSON
            return response.json();
          }
        })
        .then((data) => {
          // ici on peut utiliser les données
          callback && callback(data);
        })
        .catch(error => console.warn("Error :", error));
    });
}

voilà pour un début

[cilies38000]

Bonjour,
merci pour la réponse.
En fait je vérifie si l'api cache est disponible si c'est le cas j'essaye de récupérer les données dans le cache sinon c'est inutile d'essayer d'utiliser le cache je fais donc ma requête http normalement.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if ('caches' in window) {

[NoSmoking]

Il serait bon que tu saches les navigateurs visés, Cache est inconnu pour IE.

Si tu peux te contenter d'une solution XMLHttpRequest autant passer par localStorage ou sessionStorage mais en as-tu vraiment besoin !?!

Pour en revenir à ton code, la méthode cache.match() retourne une Response et non des datas exploitables.

Il te faudrait donc écrire quelque chose comme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
const monCache = await caches.open(CACHE_NAME);
datas = await monCache.match(URL)
  .then((response => {
    return response.json()
  }));
console.log("Data :", datas);

ou encore

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
const monCache = await caches.open(CACHE_NAME);
response = await monCache.match(URL);
datas = await response.json();  
console.log("Data :", datas);

dans la mesure où cela est encapsuler dans une fonction async, perso je trouve très laid l'utilisation de async/await .

[cilies38000]

Merci pour les conseils je vais voir si je vais rester sur une fonction async. la mise en cache est demandé par l'api pour limiter l'appel à l'API. En effet, je n'ai pas regardé ce que retourne la fonction match.