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...');
        });
    }

在视图中，getUser调用的作用是expteced，但getUsers只接收来自服务的集合中的第一个项目。我已经验证了response.data确实包含了整个对象集合，并且这些对象被推送到users数组中。

即使调用defer.resolve（response.data）也只发送集合中的第一个项目。

感谢任何帮助！

Answer 1

无需使用基于承诺的API制作$q.defer的承诺。（如果对象具有.then方法，则它是一个承诺。）

//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方法链接，因此它是一个返回的承诺。可以使用.then方法链接的任何API调用都是基于承诺的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，它解析为返回给它的响应处理程序的值。然后将新承诺返回到封闭函数。

在每个嵌套级别都有一个return（或throw）语句很重要。

用法

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

因为调用promise的.then方法会返回一个新的派生promise，所以很容易创建一个promise链。

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

--AngularJS $q Service API Reference - Chaining Promises

如何从Angular中的$ q.defer（）。promise中返回一个集合？

1 个答案:

用法