Question

我正在尝试从返回$ resource查询中创建一个对象数组，如此SO问题所示：link。但是，我不断获得相同的资源和其他元素列表。我有一个插件：here（您必须打开开发人员控制台才能看到输出。）

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，这是一个承诺，当它被解析时会将所有响应值“复制”到从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实例的地方，如果我们看一下源代码these是处理这种转换的行，我'将它们复制到这里：

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 constructor：

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

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

会引起问题吗？

我敢肯定，如果你定义的变换函数有点复杂，比如每个对象实际上是__proto__有一些方法的其他东西的实例，例如Person对象而不是普通对象，因此Person.prototype中定义的方法对整个操作的结果不可见，因为每个对象不是Person实例，而是Resource实例！（请参阅此plunkr中的此错误，请务必阅读注释，并查看由于未定义的方法而在控制台中引发的错误）

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

1 个答案: