Question

我有一个由两个函数组成的简单承诺链，我希望现在在我的HTML中调用这个链。

我现在也希望链中的一个函数可以单独调用，因为我的一个函数被使用了几次。

这是我的链

$scope.BuildImage = function () {
        return new Promise(function () {
                saveCanvas = JSON.stringify(canvas);
                localStorage.setItem('CC-canvas', saveCanvas);
                localStorage.setItem('format', sessionStorage.getItem('format'));
                localStorage.setItem('backgroundColor', sessionStorage.getItem('backgroundColor'));
                localStorage.setItem('backgroundImage', sessionStorage.getItem('backgroundImage'));
                localStorage.setItem('FirstImage', sessionStorage.getItem('FirstImage'));
                localStorage.setItem('SecondImage', sessionStorage.getItem('SecondImage'));
                localStorage.setItem('ThirdImage', sessionStorage.getItem('ThirdImage'));

                if(localStorage.getItem('CC-canvas')){
                    $scope.myCreation ='';
                }


        });
    };
    $scope.generate = function () {
        return new Promise(function () {
            $scope.generating = true;
            $scope.generateBtn = 'Generating';
            for(i = 0; i < $scope.gallery.length; i++){
                $scope.select[i] = '';
            }
            $scope.gallery = [];
            $scope.checkPhoto = [];

            $scope.uploadImage($scope.creative).then(function(result){
                $scope.generateCanvas(result, $scope.left, $scope.tops, $scope.wi, $scope.hi, $scope.per, $scope.btmR, $scope.btmL, $scope.backUrl)
                    .then(function(successUrl){
                        $timeout(function(){
                            $scope.photosToPhp.push(canvas2.toDataURL());},800);
                        console.log($scope.count);
                        console.log($scope.photos[$scope.format].length);
                        console.log($scope.backUrl);
                        console.log($scope.photos[$scope.format][$scope.count]['backUrl']);
                        if($scope.count < ($scope.photos[$scope.format].length - 1)){
                            $scope.generate();
                            $scope.count ++;
                            $scope.left = $scope.photos[$scope.format][$scope.count]['left'];
                            $scope.tops = $scope.photos[$scope.format][$scope.count]['tops'];
                            $scope.wi = $scope.photos[$scope.format][$scope.count]['wi'];
                            $scope.hi = $scope.photos[$scope.format][$scope.count]['hi'];
                            $scope.per = $scope.photos[$scope.format][$scope.count]['per'];
                            $scope.btmR = $scope.photos[$scope.format][$scope.count]['btmR'];
                            $scope.btmL = $scope.photos[$scope.format][$scope.count]['btmL'];
                            $scope.backUrl = "/mm3/public/img/formats/" + $scope.format + "/" +  $scope.photos[$scope.format][$scope.count]['backUrl'];

                            $scope.$apply();
                            $scope.canvasHide = true;

                        }else{
                            //all photos've been pushed now sending it to back end
                            $timeout(function(){
                                $http.post('/mm3/savePhotos', $scope.photosToPhp).then(function(success){
                                    $scope.generating = false;
                                    $scope.generateBtn = 'Generate';
                                    //creating mock up gallery
                                    for(var x = 0; x < success.data.photos; x++){
                                        var file ='/mm3/tmp/'+  success.data.folder + "/out" + x + ".png";
                                        $scope.gallery.push(file);
                                    }
                                    $scope.photosToPhp = [];
                                },function(error){
                                });

                            },800);
                            $scope.count = 0;
                            $scope.left = $scope.photos[$scope.format][$scope.count]['left'];
                            $scope.tops = $scope.photos[$scope.format][$scope.count]['tops'];
                            $scope.wi = $scope.photos[$scope.format][$scope.count]['wi'];
                            $scope.hi = $scope.photos[$scope.format][$scope.count]['hi'];
                            $scope.per = $scope.photos[$scope.format][$scope.count]['per'];
                            $scope.btmR = $scope.photos[$scope.format][$scope.count]['btmR'];
                            $scope.btmL = $scope.photos[$scope.format][$scope.count]['btmL'];
                            $scope.backUrl = "/mm3/public/img/formats/" + $scope.format + "/" +  $scope.photos[$scope.format][$scope.count]['backUrl'];
                            $scope.$apply();
                        }
                    })
                    .catch(function(errorUrl){
                        console.log(errorUrl);
                    })

            });
            });
    };
    Promise.all([BuildImage()]).then(generate);

这是我想从

调用链的HTML

  <div class="btn btn-primary" ng-model="creative" uib-btn-radio="'local'" ng-click="MyChain()">GENERATE

Answer 1

$scope.BuildImage和$scope.generate上的承诺回调不会调用resolve / reject来完成承诺，因此可以调用.then。

需要使用resolve成功或reject出错来调用

Promise。 Read more

BuildImages内的承诺应该是：

new Promise(function(resolve, reject) { 
    saveCanvas = JSON.stringify(canvas);

    // rest of your code ..... 

    resolve();
} );

在节点中使用promise链

1 个答案: