TypeError：无法使用拦截器读取 Angular 中未定义的属性“数据”

Posted 2023-03-16

【中文标题】TypeError：无法使用拦截器读取 Angular 中未定义的属性“数据”

【英文标题】：TypeError: Cannot read property 'data' of undefined in Angular with Interceptor

【发布时间】：2014-02-09 19:12:03

【问题描述】：

我有一个拦截器来在调用我的 RESTful 服务时捕获 http 错误：

services.config(function($httpProvider) 
    $httpProvider.responseInterceptors.push('globalInterceptor');

    var elementsList = $();

    // this message will appear for a defined amount of time and then vanish again
    var showMessage = function(content, cl, time) 
        $('<div/>')
            .addClass(cl)
            .hide()
            .fadeIn('fast')
            .delay(time)
            .fadeOut('fast', function()  $(this).remove(); )
            .appendTo(elementsList)
            .text(content);
    ;
);

services.factory('globalInterceptor', function($q)
    //When the interceptor runs, it is passed a promise object
    return function(promise)

        //In an interceptor, we return another promise created by the .then function.
        return promise.then(function(successResponse)
            //Do your code here if the response was successful
            if (typeof(successResponse) !== 'undefined') 
                if (successResponse.config.method.toUpperCase() != 'GET') 
                    showMessage('Success', 'http-success-message', 5000);
                    return successResponse;
                
            
        , function(errorResponse)
            switch (errorResponse.status) 
                case 400: // if the status is 400 we return the error
                    showMessage(errorResponse.data.message, 'http-error-message', 6000);
                    // if we have found validation error messages we will loop through
                    // and display them
                    if(errorResponse.data.errors.length > 0) 
                        for(var i=0; i<errorResponse.data.errors.length; i++) 
                            showMessage(errorResponse.data.errors[i],
                                'http-error-validation-message', 6000);
                        
                    
                    break;
                case 401: // if the status is 401 we return access denied
                    showMessage('Wrong email address or password!',
                        'http-error-message', 6000);
                    break;
                case 403: // if the status is 403 we tell the user that authorization was denied
                    showMessage('You have insufficient privileges to do what you want to do!',
                        'http-error-message', 6000);
                    break;
                case 500: // if the status is 500 we return an internal server error message
                    showMessage('Internal server error: ' + errorResponse.data.message,
                        'http-error-message', 6000);
                    break;
                default: // for all other errors we display a default error message
                    showMessage('Error ' + errorResponse.status + ': ' + errorResponse.data.message,
                        'http-error-message', 6000);
            

            return $q.reject(errorResponse);
        );
    
);

我的登录页面在加载时停止。问题是在制作 inceptor 之后出现的，在此之前一切正常。

它给了我这个真的没有帮助的错误信息：

TypeError: Cannot read property 'data' of undefined
    at http://localhost:8080/vendor/angular-1.2.2/angular.js:7479:22
    at deferred.promise.then.wrappedCallback (http://localhost:8080/vendor/angular-1.2.2/angular.js:10655:81)
    at deferred.promise.then.wrappedCallback (http://localhost:8080/vendor/angular-1.2.2/angular.js:10655:81)
    at http://localhost:8080/vendor/angular-1.2.2/angular.js:10741:26
    at Scope.$get.Scope.$eval (http://localhost:8080/vendor/angular-1.2.2/angular.js:11634:28)
    at Scope.$get.Scope.$digest (http://localhost:8080/vendor/angular-1.2.2/angular.js:11479:31)
    at Scope.$get.Scope.$apply (http://localhost:8080/vendor/angular-1.2.2/angular.js:11740:24)
    at done (http://localhost:8080/vendor/angular-1.2.2/angular.js:7744:45)
    at completeRequest (http://localhost:8080/vendor/angular-1.2.2/angular.js:7918:7)
    at XMLHttpRequest.xhr.onreadystatechange (http://localhost:8080/vendor/angular-1.2.2/angular.js:7874:11) angular.js:9159

我尝试调试/console.log 这个“数据”属性，但找不到它... 当应用加载时，它会得到两个文件正常（200 和数据属性）和其中两个错误。

任何帮助将不胜感激:-)

【问题讨论】：

您的服务器在 400 错误时返回什么？

它实际上返回了 500！它是 REST 服务的标准错误（内部服务器错误）。我只在某些异常（数据库错误等）上更改我的 HTTP 响应代码。

【参考方案1】：

我认为您的 function(errorResponse) 没有任何问题。 它似乎正确地沿着链传递错误。

但我对您的 function(successResponse) 有疑问。 仅当满足两个 IF 语句时才将值沿链向下传递，在其他情况下它传递未定义。

我的猜测是您需要在 function(successResponse) 的末尾添加 $q.reject()。

【讨论】：

我通过使用拦截器而不是已弃用的 ResponseInterceptor 解决了它...