只需調用一次或緩存來自$ http的數據獲取AngularJS服務

我在DNN中有一個簡單的應用程序。以下是我的代碼。我想要做的是創建一個調用GET API一次的服務。所以當來自輸入的相同數據被調用兩次時，服務將調用相同的api。我在檢查元素中使用網絡來查找調用函數。

<script type="text/javascript"> 
    'use strict'; 

    var myApp<%=ModuleId%> = {}; 
    var isDlgOpen; 

    try { 
     myApp<%=ModuleId%> = angular.module('myApp<%=ModuleId%>', ['ngMaterial', 'ngMessages']); 
    } 
    catch (e) { 
     myApp<%=ModuleId%> = angular.module('myApp<%=ModuleId%>', ['ngMaterial', 'ngMessages']); 
    } 

    //Service 
    myApp<%=ModuleId%>.service('myService', ['$http', '$q', function ($q, $http) { 
     this.data; 
     var self = this; 
     this.submit = function() { 
     if (angular.isDefined(self.data)) { 
      return $q.when(self.data) 
     } 
     return $http.get($scope.apiGetUrl).then(function (response) { 
      self.data = response; 
     }) 
    } 
}]); 

//Controller 
myApp<%=ModuleId%>.controller('myCtrlr<%=ModuleId%>', function (myService, $scope, $http, $mdDialog) { 
    $scope.submit = function (ev) { 
    $scope.portalAlias = 'http://<%=PortalSettings.PortalAlias.HTTPAlias %>'; 
    $scope.apiGetUrl = $scope.portalAlias + '/desktopmodules/ORSIModule/api/RepairStatus/getRepair?JobNo=' + $scope.jobNo + '&SerialNo=' + $scope.serialNo; 
    //form is valid 

    if ($scope.myForm.$valid) { 
     $scope.isLoading = true; 
     return $http.get($scope.apiGetUrl).then(
      function (response) { 
       if (response.data) { 
        $scope.myForm.$setSubmitted(); 
        $mdDialog.show(
         $mdDialog.alert() 
         .parent(angular.element(document.querySelector('dnnModule<%=ModuleId%>'))) 
         .clickOutsideToClose(true) 
         .title('title: ' + response.data.status) 
         .textContent('Thank you.') 
         .ariaLabel('Status Alert Dialog') 
         .ok('Close') 
         .targetEvent(ev) 
         .hasBackdrop(false) 
        ); 
       } else { 
        alert("Not found."); 
       } 
      }); 
     } 
    }; 
}); 

// Bootstrap the module 
var appDiv = document.getElementById("dnnModule<%=ModuleId%>"); 
angular.bootstrap(appDiv, ["myApp<%=ModuleId%>"]);

請別人幫我感謝

來源

2017-02-09 x44

你只需要緩存屬性設置爲true的GET請求：

$http.get(url, { cache: true}).success(...);

您也可以使用：

$http({ cache: true, url: url, method: 'GET'}).success(...);

另一種方法是使用cachefactory服務：

var cache = $cacheFactory('myCache'); 

var data = cache.get(someKey); 

if (!data) { 
    $http.get(url).success(function(result) { 
     data = result; 
     cache.put(someKey, data); 
    }); 
}

來源

2017-02-09 03:31:30 Yaser

謝謝亞瑟。有用！ :) – x44

如果你想在模塊配置函數中設置'$ httpProvider.defaults.cache = true'，也可以在啓動時全局設置它。 –

只需調用一次或緩存來自$ http的數據獲取AngularJS服務

回答

相關問題