10

我试图在 AngularJS 中制作一个拦截器。我对 AngularJS 很陌生，发现了一些 Interceptor 的例子，但无法让它工作。

在这里，我有我的 app.js 文件，其中包含所有相关代码。我还有一个控制器，它调用 REST api 并返回 JSONP。

首先我声明模块然后配置它（定义拦截器）。它现在应该捕获所有请求并输出到控制台...

用 app.factory 创建 Interceptor 有错吗？

var app = angular.module(
    'TVPremieresApp',
    [
    'app.services'
      , 'app.controllers'
    ]
);

app.config(function ($httpProvider) {
    $httpProvider.responseInterceptors.push('errorInterceptor');
});

app.service('MessageService', function () {
    // angular strap alert directive supports multiple alerts. 
    // Usually this is a distraction to user. 
    //Let us limit the messages to one    
    this.messages = [];
    this.setError = function(msg) {
        this.setMessage(msg, 'error', 'Error:');
    };
    this.setSuccess = function(msg) {
        this.setMessage(msg, 'success', 'Success:');
    };
    this.setInfo = function (msg) {
        this.setMessage(msg, 'info', 'Info:');
    };    
    this.setMessage = function(content, type, title) {
        var message = {
            type: type,
            title: title,
            content: content
        };
        this.messages[0] = message;
    };
    this.clear = function() {
        this.messages = [];
    };
});

app.factory('errorInterceptor', function ($q, $location, MessageService, $rootScope) {
    return function (promise) {
    // clear previously set message
    MessageService.clear();

    return promise.then(function (response) {
      console.log(response);
      return response;
    }, 
    function (response) {
      if (response.status == 404) {
        MessageService.setError('Page not found');
      } 
      else if(response.status >= 500){
        var msg = "Unknown Error.";

        if (response.data.message != undefined) {
          msg = response.data.message + " ";
        }
        MessageService.setError(msg);
      }
      // and more
      return $q.reject(response);
    });
  };
});
4

1 回答 1

34

$httpProvider.responseInterceptors已弃用。你可以修改你的代码

app.factory('errorInterceptor', ['$q', '$rootScope', 'MessageService', '$location',
    function ($q, $rootScope, MessageService, $location) {
        return {
            request: function (config) {
                return config || $q.when(config);
            },
            requestError: function(request){
                return $q.reject(request);
            },
            response: function (response) {
                return response || $q.when(response);
            },
            responseError: function (response) {
                if (response && response.status === 404) {
                }
                if (response && response.status >= 500) {
                }
                return $q.reject(response);
            }
        };
}]);

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

有关更多信息，请参阅文档

于 2014-01-21T21:07:49.887 回答