Отмена локальных запросов на уничтожение компонента

Question

Считайте, что у вас есть какой-то компонент, например автозаполнение, которое отправляет запрос GET на сервер:

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

vm.$onDestroy = () => {
  someObject = null;
}

Если компонент уничтожен во время ожидания запроса, обратный вызов выдаст ошибку js. Я знаю, что в этом конкретном примере я могу решить эту проблему с помощью простого 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, так и в Angular

Answer 1

Почему бы не назначить созданный объект объекту, который не будет уничтожен? Таким образом, ваше поведение поддерживается, и вы можете сделать простую проверку, чтобы предотвратить любые ошибки.

...
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;
}

Answer 2

Одна вещь, которую я сделал в 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();
        }
    }
}