首頁猿問在AngularJS服務中緩存pr...

在AngularJS服務中緩存promise對象

JavaScript AngularJS

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

在AngularJS服務中緩存promise對象我想使用Promises在AngularJS中實現動態加載靜態資源。問題：我在頁面上有幾個組件可能（或不是，取決于哪些顯示，因此是動態的）需要從服務器獲取靜態資源。加載后，可以在整個應用程序生命周期內進行緩存。我已經實現了這個機制，但我是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;}因此，只發出一個請求，并且對loadDataPromise（）的所有下一次調用都會獲得第一個承諾。它似乎適用于進展中的請求或前一段時間已經完成的請求。但緩存Promises是一個很好的解決方案嗎？

查看完整描述

3 回答

富國滬深

TA貢獻1790條經驗獲得超9個贊

這是正確的方法嗎？

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

這是正確的解決方案嗎？

不是。全球data變量和解決方案undefined不是承諾的工作方式。相反，履行結果的承諾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獲取參數（如url）時需要查找不同的promise 。

反對回復 2019-08-05

絕地無雙

TA貢獻1946條經驗獲得超4個贊

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

例：

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

和消費

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

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

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

否則你將對后端進行重復調用。

反對回復 2019-08-05

浮云間

TA貢獻1829條經驗獲得超4個贊

此設計設計模式將緩存第一次運行時返回的任何內容，并在每次再次調用時返回緩存的內容。

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);

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

反對回復 2019-08-05

3 回答
0 關注
612 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在AngularJS服務中緩存promise對象

在AngularJS服務中緩存promise對象

3 回答

添加回答