如何防止在AngularJS應用程序中重複$ http請求？

我需要防止重複向API發送相同的請求，之前的請求會給出響應。我找到了一些解決方案。但是，我不想在等待響應時禁用按鈕，因爲我的應用程序中有更多的API調用。

我真的需要在我的$ provider .config（）中做一些事情。我在這裏找到了一種方法（http://blog.codebrag.com/post/57412530001/preventing-duplicated-requests-in-angularjs）。

但我需要更多的澄清代碼。任何有關這方面的參考都是值得歡迎的。

來源

2015-12-17 user3391137

要求準備好使用代碼或教程是無關緊要的。如果你有一些你不明白的代碼，那麼發佈代碼，並告訴你什麼不明白。 –

*「但我需要更多澄清代碼實施..」 - - 請引用您需要澄清的部分。正因爲如此，這個問題需要尋求異地資源，或者準備好使用在此處無關緊要的代碼。順便說一句，我發現「謝謝」後的問號很有趣。 –

需要與實施教程 – user3391137

假設您的controller.js文件中有$http。

很多請求，服務器

$http.get('/link/to/file.php');

只是一個請求到服務器，不管你有多少次調用這個方法：

$http.get('/link/to/file.php', {cache: true});

例子：

(function() { 
    'use strict'; 

    angular 
      .module('yourModuleName') 
      .controller('DashboardCtrl', DashboardCtrl); 

    DashboardCtrl.$inject = ['$scope']; 

    function DashboardCtrl($scope) { 

     $scope.get = function() { 
      $http.get('/link/to/file.php', {cache: true}).then(function(response) { 
       // it will do GET request just once 
       // later you will get the same response from cacheFactory 
      }) 
     } 
    } 

}());

來源

2015-12-17 08:58:58 ssuperczynski

您錯過了OP在「先前的請求將給出響應之前」寫入的部分。您的解決方案僅在第一個響應返回後才起作用。 – AsGoodAsItGets

你可以創建一個函數來取消第一個http請求，當點擊按鈕時調用另一個。下面是一個使用$ q.defer（）函數，幫助我在一個類似問題的參考： http://odetocode.com/blogs/scott/archive/2014/04/24/canceling-http-requests-in-angularjs.aspx

來源

2015-12-17 09:05:37

但是請求仍然會發送到服務器。除非您在已經被拒絕的超時時間內調用'$ http'。 – ste2425

你是對的@ ste2425，我把我的http請求放入'timeout：canceler.promise'中，當我想要結束請求時，我只運行'canceler.resolve（）;'。我不確定這是否是最好的解決方案，但它對我有用。 –

在我的項目，我正面臨着這個問題。我發現了一個非常有用的工作液here

並實現了它的配置裏面：

function config($routeProvider, $httpProvider) { 

    $httpProvider.interceptors.push(['$injector', function interceptors($injector) { 
     // Manually injecting dependencies to avoid circular dependency problem 
     return { 
      // preventing duplicate requests 
      'request': function request(config) { 
       var $http = $injector.get('$http'), 
       copiedConfig = angular.copy(config); 

       delete copiedConfig.headers; 
       function configsAreEqual(pendingRequestConfig) { 
        var copiedPendingRequestConfig = angular.copy(pendingRequestConfig); 

        delete copiedPendingRequestConfig.headers; 

        return angular.equals(copiedConfig, copiedPendingRequestConfig); 
       } 

       if ($http.pendingRequests.some(configsAreEqual)) { 
        debugger; 
        return null; 
       } 

       return config; 
      } 
     } 
    } 
    ]); 
}

來源

2017-04-17 10:39:07 VikasChauhan

我試過這個，我的併發請求得到null的結果。我如何返回其他重複請求的回覆？意思是說，如果我有兩個對端點的調用而一個被取消，我們可以返回前一個請求的結果嗎？謝謝。 – matsientst

我想補充@VikasChauhan的答案，但我沒有足夠的聲譽對他的回答進行評論。

他的代碼對我很好，除了他返回空的部分。這導致Angular全面拋出一堆錯誤。

而不是空的，我只是拒絕請求：

return $q.reject(request);

這裏是我的功能：

$httpProvider.interceptors.push(['$injector', '$q', function interceptors($injector, $q) { 
    return { 
     // preventing duplicate requests 
     request: function request(config) { 
      var $http = $injector.get('$http'); 
      var _config = angular.copy(config); 
      delete _config.headers; 

      function isConfigEqual(pendingRequestConfig) { 
       var _pendingRequestConfig = angular.copy(pendingRequestConfig); 
       delete _pendingRequestConfig.headers; 

       return angular.equals(_config, _pendingRequestConfig); 
      } 

      if ($http.pendingRequests.some(isConfigEqual)) { 
       return $q.reject(request); 
      } 

      return config; 
     } 
    }; 
} 
]);

希望這有助於其他人。

來源

2017-10-10 15:18:52 andreico

如果你改變的部分工作，我很驚訝，因爲'request'不是你調用'$ q.reject（request）'的代碼塊中的有效變量/對象。 – AsGoodAsItGets

如何防止在AngularJS應用程序中重複$ http請求？

回答

相關問題