javascript - 如何从 Angular 中的 $q.defer().promise 返回集合？

Question

Angular v.1.6.1

我尝试使用 $q.defer().promise 返回一个集合，但我只获取一条记录，而不是从我的服务返回的两条记录。

模型:

angular.module('app').factory('User',
function() {

    /**
     * Constructor, with class name
     */
    function User(id, firstName, lastName, startDate) {
        // Public properties, assigned to the instance ('this')
        this.id = id;
        this.firstName = firstName;
        this.lastName = lastName;
        this.startDate = startDate;
    }


    /**
     * Public method, assigned to prototype
     */
    User.prototype.getFullName = function() {
        return this.firstName + ' ' + this.lastName;
    };

    User.apiResponseTransformer = function (responseData) {
        if (angular.isArray(responseData)) {
            return responseData
                .map(User.build)
                .filter(Boolean);
        }
        return User.build(responseData);
    }

    /**
     * Static method, assigned to class
     * Instance ('this') is not available in static context
     */
    User.build = function(data) {
        return new User(
            data.Id,
            data.FirstName,
            data.LastName,
            data.StartDate
        );
    };


    /**
     * Return the constructor function
     */
    return User;
});

服务

(function () {
'use strict';

var serviceId = 'userService';
angular.module('app').factory(serviceId, ['common', '$http', 'config', 'User', userService]);

function userService(common, $http, config, User) {
    var $q = common.$q;
    var defer = $q.defer();

    var service = {
        getUsers: getUsers,
        getUser: getUser
    };

    return service;

    function getUser(id) {
        $http({
            method: 'get',
            url: config.remoteServiceName + 'users/' + id
        }).then(function (response) {
            defer.resolve(User.apiResponseTransformer(response.data));
        }).then(function (response) {
            defer.reject(response);
        });

        return defer.promise;
    }

    function getUsers(startDate) {
        $http({
            method: 'get',
            url: config.remoteServiceName +'users/',
            params: {
                startDate: startDate
            }
        }).then(function (response) {
            var users = [];
            angular.forEach(response.data, function (value, key) {             
                users.push(User.apiResponseTransformer(value));
            });
            defer.resolve(users);
        }).then(function(response) {
            defer.reject(response);
        });

        return defer.promise;
    }  
}
})();

查看方法

function getUser() {
        userService.getUser(1).then(function successCallback(data) {
            vm.user = data;
        }).catch(function () {
            log('An error occured trying to get user...');
        });
    }

    function getUsers() {
        userService.getUsers(new Date().toUTCString()).then(function successCallback(data) {
            vm.users = data;
        }).catch(function () {
            log('An error occured trying to get user...');
        });
    }

在 View 内，getUser 调用按预期运行，但 getUsers 仅从服务接收集合中的第一项。我已经验证response.data确实包含整个对象集合，并且这些对象被推送到用户数组中。

即使调用 defer.resolve(response.data) 也只会发送集合中的第一项。

感谢任何帮助!

Answer 1

无需从基于 Promise 的 API 中使用 $q.defer 创建 Promise。 (如果对象有 .then 方法，那么它就是一个 promise 。)

//ERRONEOUS
function getUser(id) {
      $http({
         method: 'get',
         url: config.remoteServiceName + 'users/' + id
      }).then(function (response) {
         defer.resolve(User.apiResponseTransformer(response.data));
      }).then(function (response) {
         defer.reject(response);
      });

      return defer.promise;
}

由于调用 $http(config) 可以与 .then 方法链接，因此它返回一个 promise 。任何可以与 .then 方法链接的 API 调用都是基于 Promise 的 API。通过关注这一细节，我们可以确定未知 API 的性质。

//CORRECT
function getUser(id) {
    var promise = $http({
        method: 'get',
        url: config.remoteServiceName + 'users/' + id
    })

    var nextPromise = promise.then(function (response) {
        var value = User.apiResponseTransformer(response.data);
        //RETURN value to chain
        return value;
    }).catch(function (errorResponse) {
        //THROW to chain rejection
        throw errorResponse;
    });

    return nextPromise;
};

为了清晰起见，该链已被分解为各个部分。 $http 服务调用返回一个 promise 。 .then 方法调用返回一个新的 Promise，该 Promise 解析为返回到其响应处理程序的值。然后，新的 Promise 将返回到封闭函数。

每一层嵌套都有一个 return(或 throw)语句，这一点很重要。

用法

getUser(id).then(function(transformedValue) {
    console.log(transformedValue);
});

由于调用 Promise 的 .then 方法会返回一个新的派生 Promise，因此可以轻松创建 Promise 链。

可以创建任意长度的链，并且由于一个 Promise 可以用另一个 Promise 来解析(这将进一步推迟其解析)，因此可以在链中的任何点暂停/推迟 Promise 的解析。链。这使得实现强大的 API 成为可能。

--AngularJS $q Service API Reference - Chaining Promises