Angular.js $ http.post类型错误：无法读取的未定义的属性“数据” [英] Angular.js $http.post TypeError: Cannot read property 'data' of undefined

问题描述

1.0.6版本Angular.js

使得当一个$ http.post和（在这种情况下，401）接收非200 resposne

  $ http.post（的http：//本地主机：3030 /认证/登录'，{
  用户名：用户名，
  密码：密码
}）
.success（功能（数据）{
  //被调用的200响应，但不能在一个401
  的console.log（成功）;
}）
.error（功能（错误）{
  //永远不会被称为放大器;下面描述错误死亡。
  的console.log（'错误'）;
}）;
 

角引发以下错误：

 类型错误：无法读取属性'数据'的未定义
    在http：//本地主机：9000 /组件/角/ angular.js：8891：22
    在wrappedCallback（HTTP：//本地主机：9000 /组件/角/ angular.js：6797：59）
    在http：//本地主机：9000 /组件/角/ angular.js：6834：26
    在Object.Scope $的eval（HTTP：//本地主机：9000 /组件/角/ angular.js：8011：28）
    在Object.Scope $摘要。（HTTP：//本地主机：9000 /组件/角/ angular.js：7876：25）
    。在Object.Scope $应用（HTTP：//本地主机：9000 /组件/角/ angular.js：8097：24）
    在完成（HTTP：//本地主机：9000 /组件/角/ angular.js：9111：20）
    在completeRequest（HTTP：//本地主机：9000 /组件/角/ angular.js：9274：7）
    在XMLHtt prequest.xhr.onreadystatechange（HTTP：//本地主机：9000 /组件/角/ angular.js：9244：11）
 

和从未调用无论是 .success（）回调或 .error（） errback可使它不可能处理响应。

我是不是做错了什么？成功通话提供合法凭据如预期回被调用。

200回应：

 接入控制允许头：内容类型，授权内容长度，X-要求，随着，验证令牌
访问控制允许的方法：GET，PUT，POST，DELETE，OPTIONS
访问控制允许来源：*
连接：保持活动
内容长度：99
内容类型：应用程序/ JSON
日期：星期四，2013年5月16日13时57分51秒GMT{
  身份验证令牌：676932cc1e183a64334345944ad432d1908f8110bc
  用户：{
    标识：1，
    用户名：用户名
  }
}
 

401响应：

 接入控制允许头：内容类型，授权内容长度，X-要求，随着，验证令牌
访问控制允许的方法：GET，PUT，POST，DELETE，OPTIONS
访问控制允许来源：*
连接：保持活动
内容长度：45
内容类型：应用程序/ JSON
日期：星期四，2013年5月16日13时58分25秒GMT{
  错误：
    {
      消息：无效凭证
    }
  ]
}
 

此外，如果我采用有利于.success正常承诺的语法（）的快捷方式，我得到了一些有趣的现象：

  $ http.post（的http：//本地主机：3030 /认证/登录'，{
  用户名：用​​户名，
  密码：密码
}），然后（功能（RESP）{
  //在200响应，RESP是一个响应对象。
  //在401响应，RESP是不确定的。
  的console.log（RESP）;
}，函数（）{
  的console.log（'错误'）;
}）;
 

解决方案

终于到这条底线。这个问题是由于以下全局HTTP拦截器实现：

 使用严格的;
//注册拦截器作为服务
angular.module（'imvgm'）
  .factory（'httpInterceptor'，['$ Q'，'$ rootScope'，函数（$ Q $ rootScope）{  函数成功（响应）{
    返回响应;
  }  功能错误（响应）{
    VAR状态= response.status;    如果（状态=== 401）{
      $ rootScope $广播（'事件：loginRequired'）​​。
      返回
    }
    // 除此以外
    返回$ q.reject（响应）;
  }  复位功能（承诺）{
    返回promise.then（成功，错误）;
  };}]）;
 

N.B

 如果（状态=== 401）{
  $ rootScope $广播（'事件：loginRequired'）​​。
  返回//返回什么
}
 

FIX：

 如果（状态=== 401）{
  $ rootScope $广播（'事件：loginRequired'）​​。
}
 

Angular.js v1.0.6

When making an $http.post and receiving a non 200 resposne (401 in this case)

$http.post('http://localhost:3030/auth/login', {
  username: 'username',
  password: 'password'
})
.success(function(data) {
  // Gets called on a 200 response, but not on a 401
  console.log('success');
})
.error(function(err) {
  // Never gets called & dies with error described below.
  console.log('error');
});

Angular throws the following error:

TypeError: Cannot read property 'data' of undefined
    at http://localhost:9000/components/angular/angular.js:8891:22
    at wrappedCallback (http://localhost:9000/components/angular/angular.js:6797:59)
    at http://localhost:9000/components/angular/angular.js:6834:26
    at Object.Scope.$eval (http://localhost:9000/components/angular/angular.js:8011:28)
    at Object.Scope.$digest (http://localhost:9000/components/angular/angular.js:7876:25)
    at Object.Scope.$apply (http://localhost:9000/components/angular/angular.js:8097:24)
    at done (http://localhost:9000/components/angular/angular.js:9111:20)
    at completeRequest (http://localhost:9000/components/angular/angular.js:9274:7)
    at XMLHttpRequest.xhr.onreadystatechange (http://localhost:9000/components/angular/angular.js:9244:11) 

And never calls the either the .success() callback or .error() errback making it impossible to handle the response.

Am I doing something wrong? The success call back gets called as expected on provision of legit credentials.

200 response:

Access-Control-Allow-Headers:Content-Type, Authorization, Content-Length, X-Requested-With, Auth-Token
Access-Control-Allow-Methods:GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Origin:*
Connection:keep-alive
Content-Length:99
Content-Type:application/json
Date:Thu, 16 May 2013 13:57:51 GMT

{
  "auth-token":"676932cc1e183a64334345944ad432d1908f8110bc",
  "user": {
    "id":1,
    "username":"username"
  }
}

401 response:

Access-Control-Allow-Headers:Content-Type, Authorization, Content-Length, X-Requested-With, Auth-Token
Access-Control-Allow-Methods:GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Origin:*
Connection:keep-alive
Content-Length:45
Content-Type:application/json
Date:Thu, 16 May 2013 13:58:25 GMT

{
  "error": [
    {
      "message":"Invalid Credentials"
    }
  ]
}

Further, if I adopt the normal promise syntax in favour of the .success() shortcuts I get some interesting behaviour:

$http.post('http://localhost:3030/auth/login', {
  username: username,
  password: password
}).then(function (resp) {
  // On a 200 response, resp is a response object.
  // On a 401 response, resp is undefined.
  console.log(resp);
}, function() {
  console.log('error');
});

解决方案

Finally got to the bottom of this. The problem was due to the following global HTTP interceptor implementation:

'use strict';
// register the interceptor as a service
angular.module('imvgm')
  .factory('httpInterceptor', ['$q', '$rootScope',  function($q, $rootScope) {

  function success(response) {
    return response;
  }

  function error(response) {
    var status = response.status;

    if (status === 401) {
      $rootScope.$broadcast('event:loginRequired');
      return
    }
    // otherwise
    return $q.reject(response);
  }

  return function(promise) {
    return promise.then(success, error);
  };

}]);

N.B

if (status === 401) {
  $rootScope.$broadcast('event:loginRequired');
  return // Returns nothing
}

FIX:

if (status === 401) {
  $rootScope.$broadcast('event:loginRequired');
}

这篇关于Angular.js $ http.post类型错误：无法读取的未定义的属性“数据”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！