如何在角度的所有$ http调用之前运行一些代码

时间:2016-03-04 05:00:51

标签: javascript angularjs

我想在角度应用中使用online拨打电话之前检查用户是否为$http,作为后备,如果网络不可用,我将获得cached data

before中的$http回调是否有选项可以运行此检查?

也许还有其他任何方法可以解决这个问题,我有network state&缓存在localstorage

2 个答案:

答案 0 :(得分:4)

您可以编写自己的http服务包装器。

function httpMonkey ($http) { // I like to call all my services 'monkeys'; I find it makes angular more fun
  function request (args) {
    // stuff to do before, likely as a promise
    .then(function () {
      // the actual http request using $http
    })
    .then(function () {
      // stuff to do after, perhaps?
    });
  }

  var service = { request: request };
  return service;
}

angular
  .module('example')
  .factory('HttpMonkey', httpMonkey);

答案 1 :(得分:1)

您可以将自定义 httpInteceptor 添加到angularJs中的 $ httpProvider 服务。
作为下面的例子 - 我创建了一个httpInteceptor,它将在每个$ http调用之前显示loadingSpinner,并在成功/错误之后隐藏它。

//Intercepts ALL angular ajax http calls
app.factory('httpInterceptor', function ($q, $rootScope, $log) {
    var numLoadings = 0;
    return {
        request: function (config) {
            numLoadings++;
            // Show loader
            $('#loadingSpinner').show();
            return config || $q.when(config)
        },
        response: function (response) {
            if ((--numLoadings) === 0) {
                // Hide loader
                $('#loadingSpinner').hide();
            }
            return response || $q.when(response);
        },
        responseError: function (response) {
            if (!(--numLoadings)) {
                // Hide loader
                $('#loadingSpinner').hide();
            }
            return $q.reject(response);
        }
    };
})

然后将此拦截器推送到app.config中的$ httpProvider.interceptors。

app.config(function ($routeProvider, $httpProvider) {
      $httpProvider.interceptors.push('httpInterceptor');
      .
      .

});