首頁猿問在AngularJS服務(wù)中緩存pr...

在AngularJS服務(wù)中緩存promise對象

JavaScript AngularJS

慕的地6264312 2019-08-05 15:22:49

在AngularJS服務(wù)中緩存promise對象我想使用Promises在AngularJS中實現(xiàn)動態(tài)加載靜態(tài)資源。問題：我在頁面上有幾個組件可能（或不是，取決于哪些顯示，因此是動態(tài)的）需要從服務(wù)器獲取靜態(tài)資源。加載后，可以在整個應(yīng)用程序生命周期內(nèi)進行緩存。我已經(jīng)實現(xiàn)了這個機制，但我是Angular和Promises的新手，我想確保這是一個正確的解決方案\方法。var data = null;var deferredLoadData = null;function loadDataPromise() { if (deferredLoadData !== null) return deferredLoadData.promise; deferredLoadData = $q.defer(); $http.get("data.json").then(function (res) { data = res.data; return deferredLoadData.resolve(); }, function (res) { return deferredLoadData.reject(); }); return deferredLoadData.promise;}因此，只發(fā)出一個請求，并且對loadDataPromise（）的所有下一次調(diào)用都會獲得第一個承諾。它似乎適用于進展中的請求或前一段時間已經(jīng)完成的請求。但緩存Promises是一個很好的解決方案嗎？

查看完整描述

3 回答

富國滬深

TA貢獻1790條經(jīng)驗獲得超9個贊

這是正確的方法嗎？

是。對返回的函數(shù)使用memoisation提供了一種通用技術(shù)，可以避免重復(fù)執(zhí)行異步（通常是昂貴的）任務(wù)。承諾使緩存變得容易，因為不需要區(qū)分正在進行的操作和已完成的操作，它們都表示為（相同的）結(jié)果值的承諾。

這是正確的解決方案嗎？

不是。全球data變量和解決方案undefined不是承諾的工作方式。相反，履行結(jié)果的承諾data！它還使編碼更容易：

var dataPromise = null;function getData() {
    if (dataPromise == null)
        dataPromise = $http.get("data.json").then(function (res) {
           return res.data;
        });
    return dataPromise;}

然后，而不是loadDataPromise().then(function() { /* use global */ data })簡單getData().then(function(data) { … })。

為了進一步改進模式，您可能希望隱藏dataPromise在閉包范圍中，并注意在getData獲取參數(shù)（如url）時需要查找不同的promise 。

反對回復(fù) 2019-08-05

絕地?zé)o雙

TA貢獻1946條經(jīng)驗獲得超4個贊

為此，我創(chuàng)建了名為defer-cache-service的服務(wù)，該服務(wù)刪除了所有這些樣板代碼。它在Typescript中寫入，但您可以獲取已編譯的js文件。Github 源代碼。

例：

function loadCached() {
   return deferCacheService.getDeferred('cacke.key1', function () {
      return $http.get("data.json");
   }); }

和消費

loadCached().then(function(data) {//...});

需要注意的是，如果讓兩個或更多部件調(diào)用同一個loadDataPromise并同時進行，則必須添加此檢查

if (defer && defer.promise.$$state.status === 0) {
   return defer.promise;}

否則你將對后端進行重復(fù)調(diào)用。

反對回復(fù) 2019-08-05

浮云間

TA貢獻1829條經(jīng)驗獲得超4個贊

此設(shè)計設(shè)計模式將緩存第一次運行時返回的任何內(nèi)容，并在每次再次調(diào)用時返回緩存的內(nèi)容。

const asyncTask = (cache => {

return function(){

// when called first time, put the promise in the "cache" variable

if( !cache ){

cache = new Promise(function(resolve, reject){

setTimeout(() => {

resolve('foo');

}, 2000);

});

}

return cache;

}

})();

asyncTask().then(console.log);

簡單地用另一個自動調(diào)用函數(shù)包裝你的函數(shù)，該函數(shù)返回一個函數(shù)（你原來的異步函數(shù)），而包裝器函數(shù)的目的是為局部變量提供封裝范圍cache，這樣局部變量只能在返回的函數(shù)中訪問。包裝函數(shù)，每次asyncTask調(diào)用都具有完全相同的值（除了第一次）

反對回復(fù) 2019-08-05