angularjs $ resource将查询资源列表转换为对象数组

Question

我正在尝试从返回$ resource查询创建一个对象数组,如此SO问题所示:链接.但是,我不断获得相同的资源和其他元素列表.我有一个插件:这里 (您必须打开开发人员控制台才能看到输出.)

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


app.factory('NameResource', function($resource) {

  var url = 'data.json';
  var res = $resource(url, null, {

    query: {
      method: 'GET',
      isArray: true,
      transformResponse: function(data, headersGetter) {
        var items = angular.fromJson(data);
        var models = [];
        angular.forEach(items, function(item) {
          models.push(item);
        });
        console.log("models: ", models);
        return models;
      }
    }
  });

  return res;
});

app.controller('MainCtrl', function($scope, NameResource) {
  $scope.names = NameResource.query();
  console.log('Inside controller: ', $scope.names);

  setTimeout(function(){console.log('after some time names is:', $scope.names)}, 3000);
});

我究竟做错了什么？或者我误解了什么.这两者有什么区别？它对我来说似乎非常相似.什么时候会引起问题？

Answer 1

Resource.query返回一个数组(因为isArray你创建的标志)有两个属性,$promise这是一个promise,当被解析时会将所有响应值"复制"到从Resource.query神奇地更新视图返回的数组中,$resolved这是一个告诉我是否$promise已经解析的标志,为了回答你的问题,实际上会发生一些额外的转换,从你的转换中返回的数据实际上将通过另一个转换(无法禁用),这就是你的每个对象转换为Resource实例的地方.

所以这就是你期望发生的事情:

promise
    .then(function (rawData) {
        // this is where your transformation is happening
        // e.g. transformResponse is called with rawData
        // you return your transformed data
    })
    .then(function (transformedData) {
        // raw data has gone through 1 transformation
        // you have to decide what to do with the data, like copying it to
        // some variable for example $scope.names
    })

但是Resource正在做以下事情:

promise
    .then(function (rawData) {
        // this is where your transformation is happening
    })
    .then(function (transformedData) {
        // Resource is adding this handler and doing the
        // 'copy' to array operation here for you,
        // but it will actually create a Resource instance 
        // in the process with each item of your array!
    })
    .then(function (transformedDataV2) {
       // raw data has gone through 2 transformations here!             
    })

额外的转换是魔术发生的地方,也Resource就是创建实例的地方,如果我们看看源代码这些是处理这种转换的行,我会在这里复制它们:

if (action.isArray) {
  value.length = 0;
  forEach(data, function(item) {
    if (typeof item === "object") {
      value.push(new Resource(item));
    } else {
      // Valid JSON values may be string literals, and these should not be converted
      // into objects. These items will not have access to the Resource prototype
      // methods, but unfortunately there
      value.push(item);
    }
  });
}

data是您的第一次转换返回的数据,如上所示它将通过typeof item === 'Object'检查,因此value返回的数组Resource.query更新为新Resource项目(不包括项目).你担心这个奇怪的Resource对象,让我们分析Resource构造函数:

function Resource(value) {
  shallowClearAndCopy(value || {}, this);
}

它只是将对象的每个属性复制value到this(this是新的Resource实例),所以现在我们处理的是Resource对象而不是普通的数组对象

会引起问题吗？

我敢肯定,如果您定义的转换函数有点复杂,比如让每个对象实际上是其他__proto__具有某些方法的东西的实例,例如Person对象而不是普通对象,那么在Person.prototypewon'中定义的方法对整个操作的结果是可见的,因为每个对象不是Person实例而是Resource实例!(请参阅此plunkr中的此错误,请确保阅读注释并查看由于未定义方法而在控制台中引发的错误)