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 
    }]) 

希望这有助于...