Angular JS - 監聽或綁定$ http請求

Question

有沒有一種方法可以在每次發生$ http請求時收到/綁定一個事件，並且在收到響應之後呢？

其實我通過提供我自己的事件和偵聽器來手動完成它，但我只是好奇，如果已經有一個在Angular JS中的偵聽器？

我之所以這麼做的原因是，每當我的應用程序發送/執行一個$ http請求時，我都想顯示我的加載屏幕，以指示應用程序正在檢索數據，然後在收到響應後將其隱藏。

謝謝！

Answer 1

您可以使用interceptor做到這一點

var httpinterceptor = function ($q, $location) { 
    return { 
     request: function (config) { 
      //show your loading message 
      console.log(config); 
      return config; 
     }, 

     response: function (result) { 
      //hide your loading message 
      console.log('Repos:', result); 
      return result; 
     }, 

     responseError: function (rejection) { 
      //hide your loading message 
      console.log('Failed with', rejection); 
      return $q.reject(rejection); 
     } 
    } 
}; 

app.config(function ($httpProvider) { 
    $httpProvider.interceptors.push(httpinterceptor); 
}); 

演示：Fiddle

Answer 2

已經有上有一個模塊，你可以根據你的要求檢查這個angular-loading-bar

Answer 3

使用和修改它

您可以使用Angular Loading Bar。它通過使用角度攔截器來自動化加載欄的進度。將同一時間段內的多個請求捆綁在一起，以便每個響應都可以將進度欄增加適當的數量。

app.config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) { 
     cfpLoadingBarProvider.includeSpinner = false; // second boot loader, you can show or hide 
     cfpLoadingBarProvider.includeBar = true; // main loader 
     cfpLoadingBarProvider.latencyThreshold = 200; // delay 
    }]) 

希望這有助於...