使用 $q 服务创建一个函数 return deferred.promise 但它是 returning undefined

Question

我正在使用 Angular 的 $q 服务来 return 一个承诺。在我的函数中，当我通过我在图片数组中搜索的 id（键值）找到图片（对象）时，承诺得到解决。如果数组为空，我会得到图片，否则我会开始搜索。该功能正在运行，但我无法将其变成一个承诺。

我的服务方式：

picturesService.getCurrentPic = function (pictureId) {

    console.log("process started, id: ", pictureId);
    if(picturesService.pictures.length == 0){
        console.log("empty");
        picturesService.getPictures().then(function(data){
            picturesService.pictures = data.data.children;
            picturesService.getCurrentPic(pictureId);
        });
    }else{
        var deferred = $q.defer();
        console.log("not empty");
        for (var i = picturesService.pictures.length - 1; i >= 0; i--) {
            if(picturesService.pictures[i].data.id == pictureId){
                console.log("found: ", picturesService.pictures[i].data);
                deferred.resolve(picturesService.pictures[i].data);
                break;
            };
        };
        return deferred.promise;
    };
};

控制器代码：

picturesService.getCurrentPic(vm.pictureId).then(function(data){
    vm.currentPic = data;
    console.log("currentPic: ", vm.currentPic);
});

我遇到的错误：

无法读取未定义的属性 'then'

Answer 1

第一个条件还必须return一个承诺。您还必须在发生错误时拒绝承诺：

picturesService.getCurrentPic = function(pictureId) {

    var deferred = $q.defer();

    console.log("process started, id: ", pictureId);
    if (picturesService.pictures.length == 0) {
        console.log("empty");
        picturesService.getPictures().then(function(data) {
            picturesService.pictures = data.data.children;
            return picturesService.getCurrentPic(pictureId);

        }, function(error) {
            deferred.reject(error.message || error)
        });
    } else {
        console.log("not empty");
        var picture;
        for (var i = picturesService.pictures.length - 1; i >= 0; i--) {
            if (picturesService.pictures[i].data.id == pictureId) {
                picture = picturesService.pictures[i].data;
                console.log("found: ", picture);
                break;
            };
        };
        if (picture) {
            deferred.resolve(picture)
        } else {
            deferred.reject('picture not found: ' + id)
        }
    };

    return deferred.promise;
};

然后像这样使用它来处理错误:

picturesService.getCurrentPic(vm.pictureId).then(function(data){
    vm.currentPic = data;
    console.log("currentPic: ", vm.currentPic);
}, function(error) {
    console.log('error occured: ' + error);
});

Answer 2

您在内部递归调用 getCurrentPic，在 getPictures() returns 空数据的情况下，这将继续进行，这不是一个好的设计。我建议通过拆分 promises 和 chaniing 来使事情简单化。

学习 Promise 链：http://solutionoptimist.com/2013/12/27/javascript-promise-chains-2/

为了扁平化 promise 链，如果它失控了：http://solutionoptimist.com/2013/12/27/javascript-promise-chains-2/

picturesService.pictures = [];
picturesService.getAllPictures() = function() {
    console.log('getting all pictures');
  picturesService.getPictures().then(function(data){
    console.log('populatiing the pictures array');
    picturesService.pictures = data.data.children;
  });
}

picturesService.getCurrentPic = function(pictureId) {
    var deferred = $q.defer();
  console.log('getting the picture information for ', pictureID);
  for (var i = picturesService.pictures.length - 1; i >= 0; i--) {
    if(picturesService.pictures[i].data.id == pictureId) {
      console.log("found: ", picturesService.pictures[i].data);
      deferred.resolve(picturesService.pictures[i].data);
    };
  };
  return deferred.promise;
}

// controller code
picturesService.getAllPictures().then(function() {
    picturesService.getCurrentPic(vm.pictureId).then(function(data){
      vm.currentPic = data;
        console.log("currentPic: ", vm.currentPic);
    });
});

使用 $q 服务创建一个函数 return deferred.promise 但它是 returning undefined

Using $q service to make a function return deferred.promise but it is returning undefined

javascript

angularjs

angular-promise