JavaScript嵌套对象访问及返回undefined原因排查

返回UNDEFINED是因为Restangular的接口请求是异步执行的：你调用doGET()发起请求后，JS不会等接口返回结果就会继续往下执行，此时arr.$object只是一个空的占位对象，还没被填充接口返回的真实数据，直接读取A1属性自然拿不到值。

不要在发起请求后同步读取返回数据，等请求完成后再操作，两种常用实现方式：

方式1：通过Promise回调拿结果 #

Restangular的请求方法默认返回Promise对象，在then回调中即可拿到接口返回的完整数据：

app.controller("myCtrl", function($scope, Restangular) {
  Restangular.setBaseUrl('http://localhost:8080/StrutsREST/api');
  Restangular.all('interfaces').doGET().then(function(response) {
    // 此段逻辑会在接口请求成功返回后执行，response就是接口返回的完整对象
    console.log(response.A1);
    // 如果要将数据绑定到视图，在此处给$scope赋值即可
    $scope.targetObj = response;
  });
});

方式2：配合$then使用$object #

$object是Restangular提供的自更新占位对象，直接绑定到视图时会在数据加载完成后自动渲染，但如果要在JS逻辑中读取它的属性，需要等请求状态完成：

app.controller("myCtrl", function($scope, Restangular) {
  Restangular.setBaseUrl('http://localhost:8080/StrutsREST/api');
  var req = Restangular.all('interfaces').doGET();
  var obj = req.$object;
  // 等待请求完成后再读取属性
  req.$then(function() {
    console.log(obj.A1);
  });
});

• 前端场景下绝大多数HTTP请求都是异步的，永远不要在发起请求的代码下一行同步读取请求结果，必须在回调、await（需配合async函数）或者请求完成的钩子中处理返回数据
• 排查这类问题时，可以先在读取属性的位置打印整个obj，你会发现代码执行到这一行时，对象上确实还没有A1字段，等请求完成后再展开对象就能看到完整数据

内容的提问来源于stack exchange，提问作者Phoenix Praveen