配合angularjs中interceptor一劳永逸的加载$ionicloading的方法

在我们日常的项目开发中，每当页面需要和服务端存在交互的时候，为了界面的友好，我们都会在界面中给个loading的加载图标，当从服务端获取到数据或者已经把本地数据送到服务端并且得到相应的回应的时候我们就会隐藏刚刚的加载图标。

但是之前我们通常的做法都是在每一页面对应的controller中注入$ionicLoading，当发送请求的时候调用$ionicLoading.show();当完成与服务端的交互的时候就将loading隐藏掉，调用$ionicLoading.hide()方法，但是这样真的很麻烦，代码的重复度太高了，几乎每个页面都会不停的重复的写着这两行代码，所以这里我找到了一个一劳永逸的方法免去大家以后每个页面的loading的编写

因为最近项目比较忙，时间不多，这里就不做过多介绍，直接上方法：

方法一：利用广播（因为拦截器中不能够注入$ionicLoading）

代码如下：

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

  })

})

代码比较简单，这里就不做过多介绍了。

方法二：利用拦截器中$injector，正式我现在项目中用的方法。

拦截器中虽然不能够注入别的东西，但是有个$injector有个get方法，可以获取到别的服务，代码非常简单：

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 || {};

                var token = localStorageService.get('token');

                if (token && token.expires_at && token.expires_at > new Date().getTime()) {

                    config.headers.Authorization = 'Bearer ' + token.access_token;

                }

                return config;

            }

在response中隐藏掉loading，注意这里无论是正确的返回还是错误的返回都必须隐藏。

因为错误的返回后面各种操作代码比较多，这里就粘贴下正确的返回的代码：

    if(response.config.url.indexOf(' === 0 ){

                $injector.get('$ionicLoading').hide();

            }

            return response;

        }

巴特西

配合angularjs中interceptor一劳永逸的加载$ionicloading的方法

最新文章

热门文章