Javascript 响应拦截器数据不完整_Javascript_Angularjs

Javascript 响应拦截器数据不完整

javascript angularjs

Javascript 响应拦截器数据不完整,javascript,angularjs,Javascript,Angularjs,我有一个奇怪的问题，我无法理解。我希望有人能帮助我 Plunker：-由于某些原因，我无法在Plunker中再现情况，但由于它是创建的，所以我将其留在这里以显示预期的设置和数据设置如下所示：具有API的服务器服务器的web界面具有角度过程如下：我向API（/API/employees/{guid}）发出GET请求，该API返回类似plunker中employee.json的数据。我正在使用NgResource（角度资源）查询API 它被HttpInterceptor拦截，HttpI

我有一个奇怪的问题，我无法理解。我希望有人能帮助我

Plunker：-由于某些原因，我无法在Plunker中再现情况，但由于它是创建的，所以我将其留在这里以显示预期的设置和数据

设置如下所示：

具有API的服务器
服务器的web界面具有角度

过程如下：

我向API（

/API/employees/{guid}

）发出GET请求，该API返回类似plunker中employee.json的数据。我正在使用NgResource（角度资源）查询API

它被HttpInterceptor拦截，HttpInterceptor向请求中添加一些必需的头

当服务器返回数据（服务器响应）时，HttpInterceptor再次拦截响应。它会做一些事情，并根据状态拒绝或继续

当它继续时，数据被简单地传递回控制器

我的问题在3到4之间：当响应被截获时（3），我记录数据（如plunker的script.js，第35行所示），然后随机得到

response.data.account.roles

empty。我确信roles数组不是空的，因为当我在Developer工具（googlechrome，Network选项卡）中检查数据时，响应包含所有数据。即使在API日志（服务器端）中，角色数组也不是空的

奇怪的是，当我记录截获的响应时，

response.data.account.roles

可能是空的（是的，不总是空的）。但是，如果我显式地记录对象（使用

response.data.account.roles

），数组永远不会为空

在UI中，我使用angular显示完整对象（plunker的index.html，第17行），有时account.roles为空。我说有时是因为它发生在我重新加载页面时。当然，这会导致UI出现问题，因为response.data.account.roles有时为空，我需要它来设置select元素的选定项

我做了一些测试：

在angular-resource.js（执行响应的位置）中放置一个断点，response.data包含所有预期角色
在angular.js中的$http（config）.transformResponse（private方法）中放置另一个断点，同样，响应（无解析）完成（角色存在）

在httpInterceptor内部，如果我执行响应对象的angular.copy，则角色数组将被填充

var copy = angular.copy(response);
// copy.data.account.roles.length > 0 = true
// response.data.account.roles.length > 0 = false

在前两个测试中，响应包含预期的数据，但奇怪的是，在UI（和拦截器）中，角色数组是空的

我希望有人能启发我，因为我不明白：（.顺便说一下，我也在谷歌群里问过这个问题->

感谢所有读到这篇文章的人

plunker代码如下：

script.js

var app = angular.module('app', ['ngResource']);

app.factory('HttpInterceptor', function($rootScope, $log, $q, $injector, $location) {
  var interceptor = {
    request: onRequest,
    requestError: onRequestError,
    response: onResponse,
    responseError: onResponseError
  };
  return interceptor;

  function onRequest(config) {
    $log.debug('Entering request.');
    config.headers['Accept-Language'] = 'es-cl';
    if (config.url.endsWith('.html')) {
      return config;
    }
    config.headers['Accept'] = 'application/json';
    var token = 'token data that comes from server';
    if (!angular.isUndefined(token)) {
      config.headers.Authorization = token;
    }
    $log.debug('Leaving request.');
    return config;
  }

  function onRequestError(error) {
    $log.error('Request failed.', error);
  }

  function onResponse(response) {
    $log.info('Response success.');
    // Roles array is empty
    // Here, when the account is present, the roles array MAY be empty
    $log.debug('Intercepted response data:', response);
    if (response) {
      if (response.data) {
        if (response.data.account) {
          // Data shown correctly
          // Here, when the account is present, the roles array ALWAYS has data
          // (of course, only when the roles is not empty)
          if (response.data.account.roles) {
            $log.debug('Roles:', response.data.account.roles);
          }
        }
      }
    }

    var copy = angular.copy(response);
    // copy.data.account.roles.length > 0 = true
    // response.data.account.roles > 0 = false (sometimes)

    return response || $q.when(response);
  }
});

mainController.js

angular.module('app').controller('mainCtrl', function($scope, $http, JsonFactory) {
  JsonFactory.get(function(data) {
    $scope.employee = data;
  });
});

jsonFactory.js

angular.module('app').factory('JsonFactory', function($resource) {
  return $resource('employee.json');
});

employee.json（预期的服务器响应）

index.html

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <script src="https://code.angularjs.org/1.4.8/angular-resource.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="jsonFactory.js"></script>
    <script src="mainController.js"></script>
  </head>

  <body ng-app="app">
    <div ng-controller="mainCtrl as ctrl">
      <div>
        <h4>Employee</h4>
        <pre>{{ employee | json }}</pre>
      </div>
      <div>
        <h4>Roles</h4>
        <pre>{{ employee.account.roles | json }}</pre>
      </div>
    </div>
  </body>

</html>


雇员
{{employee | json}}
角色
{{employee.account.roles | json}

更新12-01-2016

copy.data.account.roles

有时也可以为空

我知道，

$log.debug | info | etc

不显示当前对象状态，因此我使用断点检查Google Chrome中的对象

Angular版本是1.4。

好吧，我解决了我的问题…问题是我使用的指令删除了数组的内容

感谢所有花时间阅读本文的人。

好吧，我解决了我的问题……问题是我使用的一个指令删除了数组的内容

感谢每一位花时间阅读本文的人。

你能在不同的浏览器FF/Chrome中检查这一点吗？你使用的是哪个版本的Angular？@csharpfolk这在FF、Chrome和Opera中都会发生。Angular版本是1.4（也添加到问题中）。谢谢！你能在不同的浏览器FF/Chrome中检查这一点吗？你使用的是哪个版本的Angular？@csharpfolk这在FF、Chrome和Opera中发生。Angular版本是1.4（也添加到问题中）。谢谢！

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <script src="https://code.angularjs.org/1.4.8/angular-resource.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="jsonFactory.js"></script>
    <script src="mainController.js"></script>
  </head>

  <body ng-app="app">
    <div ng-controller="mainCtrl as ctrl">
      <div>
        <h4>Employee</h4>
        <pre>{{ employee | json }}</pre>
      </div>
      <div>
        <h4>Roles</h4>
        <pre>{{ employee.account.roles | json }}</pre>
      </div>
    </div>
  </body>

</html>