如何使用angularJS拦截器来拦截特定的http请求?

jru*_*ter 28 angularjs angularjs-service

我知道如何拦截所有请求,但我只想拦截来自我的资源的请求.

有谁知道如何做到这一点?

services.config(['$httpProvider',function($httpProvider) {
    $httpProvider.interceptors.push('myHttpInterceptor');
}]);

services.factory("userPurchased", function ($resource) {
    return $resource("/api/user/purchases/:action/:item", 
        {}, 
        {
            'list': {method: 'GET', params: {action: 'list'}, isArray: false},
            'save': {method: 'PUT', params: {item: '@item'}},
            'remove': {method: 'DELETE', params: {item: '@item'}},
        }
    );
});

services.factory('myHttpInterceptor', function($q,$rootScope) {
    // $rootScope.showSpinner = false;
    return {

      response: function(response) {
        $rootScope.showSpinner = false;
        // do something on success
        console.log('success');
        console.log('status', response.status);
        //return response;
        return response || $q.when(response);
      },

     responseError: function(response) {
        // do something on error
        $rootScope.showSpinner = true;
        console.log('failure');
        console.log('status', response.status)
        //return response;
        return $q.reject(response);
      }
    };
  });
Run Code Online (Sandbox Code Playgroud)

rob*_*rob 23

我知道这样做的唯一方法就是在响应处理程序中过滤掉你想要的请求.

例如

...
response: function(response) {
    if(response.config.url.startsWith('/api/')) {
        //Do your custom processing here
    }

    return response;
}
...
Run Code Online (Sandbox Code Playgroud)

用于string.startsWith()的polyfill

//Taken from http://stackoverflow.com/questions/646628/javascript-startswith
if (typeof(String.prototype.startsWith) === 'undefined') {
    String.prototype.startsWith = function(str) {
        return this.slice(0, str.length) === str;
    };
}
Run Code Online (Sandbox Code Playgroud)

  • +1为polyfill代码段归因 (5认同)
  • 如果您使用的是直接网址,那么好的`indexOf('/ api /')> -1`也应该可以使用 (3认同)

Vad*_*dim 23

如果要仅拦截来自特定资源的请求,可以使用可选interceptor$request操作属性.Angular的文档在这里看到(用法>操作)

JavaScript的

angular.module('app', ['ngResource']).
  factory('resourceInterceptor', function() {
    return {
      response: function(response) {
        console.log('response intercepted: ', response);
      }
    }
  }).
  factory('resourceService', ['$resource', 'resourceInterceptor', function($resource, resourceInterceptor) {
    return $resource(":name", 
        {}, 
        {
            'list': {method: 'GET', isArray: false, interceptor: resourceInterceptor}
        }
    );
  }]).
  run(['resourceService', '$http', function(resourceService, $http) {
    resourceService.list({name: 'list.json'}); // <= intercepted
    $http.get('list.json'); // <= not intercepted
  }]);
Run Code Online (Sandbox Code Playgroud)

Plunker:http://plnkr.co/edit/xjJH1rdJyB6vvpDACJOT?p=preview