Ionic使用interceptor统一处理HTTP请求

实际上我们会经常使用HTTP请求时候做一个加载提示，但是每次都去写ionicLoading确实很麻烦，我们可以在使用interceptor拦截器做统一的处理。

比如官网介绍的方法：

http://learn.ionicframework.online/formulas/loading-screen-with-interceptors/

var app = angular.module('ionicApp', ['ionic'])

app.config(function($httpProvider) {
  $httpProvider.interceptors.push(function($rootScope) {
    return {
      request: function(config) {
        $rootScope.$broadcast('loading:show')
        return config
      },
      response: function(response) {
        $rootScope.$broadcast('loading:hide')
        return response
      }
    }
  })
})

app.run(function($rootScope, $ionicLoading) {
  $rootScope.$on('loading:show', function() {
    $ionicLoading.show({template: 'foo'})
  })

  $rootScope.$on('loading:hide', function() {
    $ionicLoading.hide()
  })
})

app.controller('MainCtrl', function($http, $ionicLoading) {
  var _this = this

  $http.jsonp('http://api.openbeerdatabase.com/v1/breweries.json?callback=JSON_CALLBACK').then(function(result) {
    _this.breweries = result.data.breweries
  })
})

通过代码，可以看出来是借助于$rootScope的$broadcast和$on来传播和接收事件，从而控制提示框的显示和隐藏。

事实上，我们也可以通过$injector本身来获取到具体的服务，比如下面的代码：

request: function (config) {
    if (config.url.toString().indexOf('http://') === 0) {
        $injector.get('$ionicLoading').show({
            template: '<div><svg class="circular"><circle r="20" class="path" cx="50" cy="50" fill="none" stroke-width="2" stroke-miterlimit="10"></circle></svg>'
        });
    }
    config.headers = config.headers || {};
  
    return config;
}

是不是简单多了，实际使用项目的时候，我偏向于后一种方法，而尽量减少使用$rootScope避免全局变量污染。