AngularJS：使用自定义服务转换 $resource 中的响应答案

【问题标题】：AngularJS: transform response in $resource using a custom serviceAngularJS：使用自定义服务转换 $resource 中的响应
【发布时间】：2014-03-22 13:51:25
【问题描述】：

我正在尝试使用来自自定义服务的数据来装饰从角度 $resource 返回的数据。我的代码是：

angular.module('yoApp')
  .service('ServerStatus', ['$resource', 'ServerConfig', function($resource, ServerConfig) {
    var mixinConfig = function(data, ServerConfig) {
      for ( var i = 0; i < data.servers.length; i++) {
        var cfg = ServerConfig.get({server: data.servers[i].name});
        if (cfg) {
          data.servers[i].cfg = cfg;
        }
      }
      return data;
    };

    return $resource('/service/server/:server', {server: '@server'}, {
      query: {
        method: 'GET',
        isArray: true,
        transformResponse: function(data, header) {
          return mixinConfig(angular.fromJson(data), ServerConfig);
        }
      },
      get: {
        method: 'GET',
        isArray: false,
        transformResponse: function(data, header) {
          var cfg = ServerConfig.get({server: 'localhost'});
          return mixinConfig(angular.fromJson(data), ServerConfig);
        }
      }
  });
}]);

看来我在依赖注入方面做错了。从 ServerConfig.get() 返回的数据被标记为未解析。我让这个在控制器中工作，我在其中进行转换

ServerStatus.get(function(data) {$scope.mixinConfig(data);});

但我宁愿在服务中做装饰。我怎样才能做到这一点？

【问题讨论】：

transformResponse 函数是否被调用？您使用的是哪个版本的 Angular？你会在这里找到一个实现响应装饰的简约示例：jsfiddle.net/YxTNL/1
@LukasBünger 感谢您的回复。我想出了一个解决方案并将其发布到jsfiddle.net/maddin/7zgz6 我想要实现的目标在 transformResponse 中是不可能的。我想我写了一个正确的答案......

标签： javascript angularjs angular-resource angularjs-resource

【解决方案1】：

嗯，实际上可以异步装饰资源的数据，但不能使用transformResponse 方法。应该使用interceptor。

这是一个快速示例。

angular.module('app').factory('myResource', function ($resource, $http) {
  return $resource('api/myresource', {}, {
    get: {
      method: 'GET',
      interceptor: {
        response: function (response) {
          var originalData = response.data;
          return $http({
              method: 'GET',
              url: 'api/otherresource'
            })
            .then(function (response) {
              //modify the data of myResource with the data from the second request
              originalData.otherResource = response.data;
              return originalData;
            });
        }
      }
    });

您可以使用任何服务/资源来代替$http。

更新：
由于 Angular 的 $resource 拦截器的实现方式，上面的代码只会修饰 $promise 返回的数据，并且在某种程度上打破了一些 $resource 概念，尤其是这一点。

var myObject = myResource.get(myId);

只有这样才行。

var myObject;
myResource.get(myId).$promise.then(function (res) {
  myObject = res;
});

【讨论】：

“破坏了一些 $resource 概念”太糟糕了！ $resource 有点糟糕。不过，感谢您提供有用的信息！

【解决方案2】：

不能使用 transformResponse 来使用来自异步服务的数据来装饰数据。我将解决方案发布到http://jsfiddle.net/maddin/7zgz6/。

下面是解释解决方案的伪代码：

angular.module('myApp').service('MyService', function($q, $resource) {
  var getResult = function() {
    var fullResult = $q.defer();
    $resource('url').get().$promise.then(function(data) {
      var partialPromises = [];
      for (var i = 0; i < data.elements.length; i++) {
        var ires = $q.defer();
        partialPromisses.push(ires);
        $resource('url2').get().$promise.then(function(data2) {
          //do whatever you want with data
          ires.resolve(data2);
        });
        $q.all(partialPromisses).then(function() {
          fullResult.resolve(data);
        });
        return fullResult.promise; // or just fullResult
      }
    });
  };
  return {
    getResult: getResult
  };
});

【讨论】：