在控制器中链接AngularJS Promises。这种解决方法有效吗?

时间:2015-12-02 20:31:07

标签: angularjs controller promise chaining

注意:这是在TypeScript / Angular 1.4.x

javascript中的Plunker:http://plnkr.co/edit/LCka4CFLcRe0lPEF9AM2?p=preview

我必须使用promises链接多个调用。 init3取决于init2取决于init1

有些承诺即使失败也需要继续。所以我必须在这里使用扁平化技术:http://solutionoptimist.com/2013/12/27/javascript-promise-chains-2/重用回调代码。

问题是当链接promises时,我完全丢失了第一链内的控制器this实例,然后(init2init3) 所以我修改了内部返回以传递链中的控制器,因此可以访问绑定(绑定到控制器)和服务。

这是有效/正确吗? (在链中传递控制器并重复使用相同的回调以获得成功/错误)

代码中的注释也解释/提出问题。

代码:

export class ControllerX {

    private myInformation: string;
    private myMoreInformation: string;

    public constructor(private $q: ng.IQService, private service1: Service1) {

        this.init()
            .then(this.init2) //If init() fails dont continue the chain
            .then(this.init3, this.init3); //Even if init2() fail, we continue.
            //init2() cannot fail now but its a recovery example.
    }

    private init(): ng.IPromise<ControllerX> {
        return this.service1.getMyInformation().then((information: string): ControllerX => {
            this.myInformation = information;
            return this; //Push this for the next then
        }); //Do nothing on error, let it propagate.
    }

    private init2(ctrl?: ControllerX): ng.IPromise<ControllerX> {

        if (!ctrl) { //Are we called from a chain
            ctrl = this;
        }

        return ctrl.service1.getMyMoreInfo().then((information: string): ControllerX => {
            ctrl.myMoreInformation = information;
            return ctrl;
        }, (error: any): ControleurListeCours => {
            ctrl.myMoreInformation = DEFAULT;
            return ctrl;
        });
    }

    private init3(ctrl?: ControllerX): ng.IPromise<ControllerX> {
        //blablabla
    }
}

1 个答案:

答案 0 :(得分:0)

  

此代码无法按预期工作。

 this.init()
        .then(this.init2) //If init() fails dont continue the chain
        .then(this.init3, this.init3); //Even if init2() fail, we continue.
        //init2() cannot fail now but its a recovery example.

如果init失败,代码将跳过init2,但会被第二个then方法捕获,并且init3将被执行。

<强> HTML

<div ng-app="myApp" ng-controller="myVm as vm">
  <pre>
init1 status = {{vm.init1Status}}
init2 status = {{vm.init2Status}}
init3 status = {{vm.init3Status}}
  </pre>
</div>

<强> JS

angular.module('myApp',[]).controller('myVm', function ($q) {
    var vm = this;
    vm.init1Status = "not done";
    vm.init2Status = "not done";
    vm.init3Status = "not done";

    function init1() {
      vm.init1Status = "init1 failed";
      return $q.reject("init1 failed");
    };

    function init2() {
      vm.init2Status = "init2 done";
    };

    function init3() {
      vm.init3Status = "init3 done";
    };

    init1().then(init2).then(init3,init3);
});

结果

init1 status = init1 failed
init2 status = not done
init3 status = init3 done

JSFiddle