JQuery $ .getJSON asynchrone Problemumgehung - Zwischenspeichern von Ajax-Ergebnissen

Question

Ich speichere den JSON, der von Ajax-Aufrufen zurückgegeben wird, und zeige dann die Ergebnisse aus dem Cache an. Mein Problem ist, wenn für diesen Ajax-Aufruf bereits kein Cache vorhanden ist, werden die Ergebnisse nur bei der Aktualisierung angezeigt. Das liegt an der Tatsache, dass Ajax asynchron ist, aber wie komme ich dazu? Ajax async: false ist veraltet, das ist keine Option. Würde die $ .getJSON .done() Funktion ausreichen oder gibt es einen besseren Weg?

Hier ist mein Code so weit:

if ((online === true)) { 
    //get JSON 
    $.getJSON(baseurl + '/wp-json/app/v2/files?filter[category]' + cat + '&per_page=100', function(jd) { 
     //cache JSON 
     var cache = { 
      date: new Date(), 
      data: JSON.stringify(jd) 
     }; 
     localStorage.setItem('cat-' + cat, JSON.stringify(cache)); 
    }); 
    //if not online and no cached file 
} else if ((online === false) && (!cache['cat-' + cat])) { 
    alert('There are no cached files. You need to be online.'); 
} 

//get cached JSON 
cache['cat-' + cat] = JSON.parse(localStorage.getItem('cat-' + cat)); 
var objCache = cache['cat-' + cat].data; 
objCache = JSON.parse(objCache); //Parse string to json 
//display JSON results from cache 
$.each(objCache, function(i, jd) { 
    var thumb = jd.file_thumbnail.sizes.medium; 
    //.....etc... 
    ) 
}} 

Answer 1

Ein einfaches Umschreiben des Codes ergibt folgendes:

function cacheAsCacheCan(cat, callback) { 
    if (online === true) { 
     //get JSON 
     $.getJSON(baseurl + '/wp-json/app/v2/files?filter[category]' + cat + '&per_page=100', function(jd) { 
      //cache JSON 
      var cache = { 
       date: new Date(), 
       data: JSON.stringify(jd) 
      }; 
      localStorage.setItem('cat--' + cat, JSON.stringify(cache)); 
     }); 
     //if not online and no cached file 
    } else if ((online === false) && (!cache['cat-' + cat])) { 
     callback('There are no cached files. You need to be online.'); 
     return; 
    } 
    //get cached JSON 
    callback(null, cache['cat-' + cat] = JSON.parse(localStorage.getItem('cat-' + cat))); 
} 

cacheAsCacheCan('someCat', function(error, cachedata) { 
    if(error) { 
     alert(error); 
    } else { 
     var objCache = cachedata.data; 
     objCache = JSON.parse(objCache); //Parse string to json 
     //display JSON results from cache 
     $.each(objCache, function(i, jd) { 
       var thumb = jd.file_thumbnail.sizes.medium; 
       //.....etc... 
      ) 
     } 
    } 
);