javascript - 如何在 Angular 中查询和提取服务器响应

Question

我想创建一个 find 方法，该方法循环遍历 Angular 中的 $resource 服务返回的数组。

如果我有这样的服务:

'use strict';

angular.module('adminApp').factory('ProductType', function($resource) {
  var ProductType;
  ProductType = $resource('http://localhost:3000/api/v1/product_types/:id.json', {
    id: '@id'
  }, {
    update: {
      method: 'PUT'
    }
  });


  ProductType.find = function(typeName){
    var types = this.query(),
        typeObject = {},
        self = this;

    for(type in types) {
       var result = types[type],
           resultName = self.normalizeName(result.name),       

       if(typeName === resultName) {
         typeObject = result;
       } 
     }

     return typeObject;
  };

  return ProductType;
});

我尝试将其全部包装在一个函数中并返回该函数，认为它与异步有关，并且我还尝试在查询方法中嵌套回调，但这只允许我修改响应而不实际返回任何内容不同。

当我尝试在 Controller 中将返回值设置为 $scope 时，我得到一个空白对象

Answer 1

this.query() 方法将返回一个数组，在 this.query() 方法从服务器返回结果之前，该数组可能不会被填充。您将需要执行类似的操作来等待对服务器的调用完成。由于这是一种异步，您需要从此方法返回一个 promise ，该 promise 在初始查询完成并且您搜索了结果时得到解决。

'use strict';

angular.module('adminApp').factory('ProductType', [
  '$q',
  '$resource',
  function($q, $resource) {
    var ProductType;
    ProductType = $resource('http://localhost:3000/api/v1/product_types/:id.json', {
      id: '@id'
    }, {
      update: {
        method: 'PUT'
      }
    });


    ProductType.find = function(typeName) {
      var defer = $q.defer(),
          types = this.query(),
          self = this;

          types.$promise.then(function () {
            var result, 
                resultName,
                typeObject,
                type;

            for(type in types) {
               result = types[type];
               resultName = self.normalizeName(result.name);    

               if(typeName === resultName) {
                 typeObject = result;
                 break;
               } 
             }

             defer.resolve(typeObject);
          }, function (err) {
            // the called failed
            defer.reject(err);
          })

       return defer.promise;
    };

    return ProductType;
  }]);

取自 Angular 文档 https://docs.angularjs.org/api/ngResource/service/$resource

重要的是要认识到调用 $resource 对象方法会立即返回空引用(对象或数组取决于 isArray)。一旦数据从服务器返回，现有的引用就会被实际数据填充。这是一个有用的技巧，因为通常将资源分配给模型，然后由 View 呈现。空对象会导致不渲染，一旦数据从服务器到达，该对象就会填充数据，并且 View 会自动重新渲染自身以显示新数据。