代码之家  ›  专栏  ›  技术社区  ›  Petr Averyanov

取消组件销毁的本地请求

  •  3
  • Petr Averyanov  · 技术社区  · 6 年前

    考虑您有一些组件,例如自动完成,向服务器发送get请求:

    ...
    someObject = create();
    vm.search = someFactory.getHttp(params).then(result => {
      someObjet.prop = result;
    });
    
    vm.$onDestroy = () => {
      someObject = null;
    }
    

    若组件在请求挂起时被销毁,回调将抛出js错误。 我知道在这个具体的例子中,我可以使用simple If解决这个问题,但很明显,最好能满足这个请求:

    var canceler = $q.defer();
    vm.search = someFactory.getHttp(params, canceler)...
    
    vm.$onDestroy = () => {
          canceler.resolve();
          someObject = null;
    }
    

    这是完美的,但在每个组件中都有这样的代码似乎很奇怪。我想要一些类似于:

    vm.search = someFactory.getHttp(params, $scope.destroyPromise)
    

    但这样的事情似乎并不存在。。。

    问题:有什么简单的方法可以取消组件销毁请求吗? 无论是在Angularjs还是在Angularjs中

    2 回复  |  直到 6 年前
        1
  •  0
  •   Jordan Stubblefield    6 年前

    我在Angular中做的一件事是使用RXjs进行请求,使用订阅,并将这些订阅添加到我们迭代并在销毁时取消的数组中,如下所示:

    import { Component, OnInit, OnDestroy} from "@angular/core";
    import { ActivatedRoute }              from "@angular/router";
    
    export class AppComponent implements OnInit, OnDestroy {
        private subscriptions = [];
    
        constructor(private route AppRoute) {}
    
        ngOnInit() {
            this.subscriptions.push(this.route.data.subscribe());
        }
    
        ngOnDestroy() {
            for (let subscription of this.subscriptions) {
                subscription.unsubscribe();
            }
        }
    }
    
        2
  •  0
  •   TheChetan    6 年前

    为什么不把创建的对象分配给一个不会被破坏的对象呢?通过这种方式,你的行为得到了维护,你可以做一个简单的检查来防止任何错误。

    ...
    var baseObj = {};
    baseObj.someObject = create();
    vm.search = someFactory.getHttp(params).then(result => {
        if (baseObj.someObject != null) {
            baseObj.someObjet.prop = result;
        }
    });
    
    vm.$onDestroy = () => {
      baseObj.someObject = null;
    }