javascript - AngularJS:加载缓存或未缓存的 URL

Question

我有一个 AngularJS 函数，它从 Web 服务加载数据，然后将其存储在 localStorage 中。第一次调用此函数后，应从 localStorage 加载数据(除非缓存在一小时后失效)。

我想外部化这个函数，但我正在摸不着头脑，如何将同步和异步调用放入一个方法中。我们开始吧。

function callWebService(url) {
    var resultFromLocalStorage = localStorage.getItem(url);
    if (resultFromLocalStorage && Utils.cacheIsStillValid()) { //(*)
        $timeout(function() { buildTable(JSON.parse(resultFromLocalStorage)); }, 10);
    } else {
        $resource(url).get().$promise.then(function(result) {
            localStorage.setItem("cacheExpiry", new Date().getTime() + Utils.ONE_HOUR_IN_MS);
            localStorage.setItem(url, JSON.stringify(result));
            buildTable(result);
        });
    }
}
//*Utils.cacheIsStillValid checks the localStorage item "cacheExpiry"

我想将缓存的东西外部化，所以最后，我只想要这个:

function callWebService(url) {
    var result = getResultFromCacheOrReload(url); // to be done
    buildTable(result);
}

我该怎么做？ getResultFromCacheOrReload(url) 方法看起来如何？

谢谢，伯恩哈德

Answer 1

只需从 getResultFromCacheOrReload 返回一个 promise 并在解析时构建表:

function callWebService(url) {
    var result = getResultFromCacheOrReload(url).then(function (result) {
        buildTable(result);
    });
}

函数getResultFromCacheOrReload可以是这样的:

function getResultFromCacheOrReload(url) {
    var resultFromLocalStorage = localStorage.getItem(url);
    if (resultFromLocalStorage && Utils.cacheIsStillValid()) {
        return $q.when(resultFromLocalStorage); // Create a fulfilled promise containing  resultFromLocalStorage
    } else {
        return $resource(url).get().then(function (result) { // Return the promise returned by the "then" method
            localStorage.setItem("cacheExpiry", new Date().getTime() + Utils.ONE_HOUR_IN_MS);
            localStorage.setItem(url, JSON.stringify(result));
            return result; // Every object returned by a then() method is wrapped by a promise
        });
    }
}