AngularJS服务返回一个对象而不是一个承诺

Question

I am trying to refactor my AngularJS code by having my service resolve a promise call that will automatically bind an object to to my scope.

// converting this:
imageService.getImages(userId)
.then(images => {
    $scope.images = images;
});

// into this:
$scope.images = imageService.getImages(userId);

My current solution I am trying to refactor is:

function getImages(userId) {
    const config = {
        method: 'get',
        url: '/a/images',
        params: { userId: userId }
    };

    return $http(config).then(onGetImagesSuccess, onGetImagesError);
}

function onGetImagesSuccess(response) {
    $log.info('Get image success', response);
    return response.data;
}

function onGetImagesError(response) {
    $log.info('Get image error', response);
}

I started playing around with $q.defer() and I got my getImages() to this following state. The problem is that I imageService.getImages() returns a Promise instead of the images. It is interesting that the list of images do get logged tho.

function getImages(userId) {
    const deferred = $q.defer();
    const config = {
        method: 'get',
        url: '/a/images',
        params: { userId: userId }
    };

    let call = $http(config).then(onGetImagesSuccess, onGetImagesError);
    deferred.resolve(call);

    return deferred.promise.then(images => {
        $log.info(images); // List of images does get logged
        return images; // Promise gets returned instead of the actual images
    });
}

I am wondering what do I need to do to refactor my code to get my imageService.getImages() to return a list of images instead of a Promise.

Answer 1

This can be done by same recipe that is used in $resource . Empty object (array) is returned which is filled with data asynchronously. A promise should be returned as well, in case there's a need to know when and how a request finished:

var result = {
  data: [],
  promise: $http(...).then(response => {
    return Object.assign(result.data, response.data);
  })
};

return result;

Then imageService.data array is bound in view.

This pattern has its pros and cons. It is natural to have then in controller to unwrap promises.