Angular 4: отменить все ожидающие $ http запросы на изменение маршрута

Question

Angular 4: отменить все ожидающие $ http запросы на изменение маршрута

1

У меня есть DataService, например:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class DataService {

  constructor(private http: Http) {}

  getData(): Promise<any[]> {
    return this.http.get('/api/data')
      .toPromise()
      .then(response => {
        const js_res = response.json();
        if ( js_res.data ){
          return js_res.data as any[];
        } else {
          throw new Error(js_res.info || response.text); 
        }
      })
      .catch( err => { console.log(err); });
  }
}

этот DataService вызывается много раз в каждом маршруте. Когда пользователь меняет маршрут, так много запросов может быть отложено, и я хочу прервать все ожидающие запросы старого маршрута.

Я новичок в Angular 4, каков правильный подход?

ar099968 11 сен. 2017, в 09:12

Источник

0

onNgDestroy отписаться от заметного или обещанного
Rahul Singh 11 сен. 2017, в 07:07
0

@RahulSingh, но это инъекционный сервис, возможно, я ошибаюсь, но он не разрушается при изменении маршрута.
ar099968 11 сен. 2017, в 07:09
0

вы будете использовать это в своем компоненте прямо там, вам нужно отписаться, или же пойти на перехватчики
Rahul Singh 11 сен. 2017, в 07:09
0

@RahulSingh Google не может помочь мне ... у вас есть пример? извините, я новичок на угловой
ar099968 11 сен. 2017, в 07:19

Показать ещё 2 комментария

Теги:

angular

javascript

1 ответ

Ещё вопросы

onNgDestroy отписаться от заметного или обещанного
@RahulSingh, но это инъекционный сервис, возможно, я ошибаюсь, но он не разрушается при изменении маршрута.
вы будете использовать это в своем компоненте прямо там, вам нужно отписаться, или же пойти на перехватчики
@RahulSingh Google не может помочь мне ... у вас есть пример? извините, я новичок на угловой

Marius Lazar · Accepted Answer · 2017-11-03T08-15-00.000Z

Таким образом, у вас установлена служба данных, и ваш метод getData() сделает HTTP-запрос, где бы вы его не назовете.

Скажем, вы вызываете этот метод внутри HeroListComponent. У этого компонента есть некоторые методы жизненного цикла, один из которых - onNgDestroy который вы можете использовать для логики отмены. Этот метод будет автоматически вызываться угловым при перемещении от этого компонента.

Поэтому внутри метода HeroListComponent ngOnInit вы вызываете HTTP-вызов, а внутри ngOnDestroy вы отписываетесь от него. Я не тестировал код, но, поскольку вы преобразовываете Observable в Promise в свой DataService, я не уверен, что вы все равно можете отказаться от подписки. Если это не сработает, вам нужно будет преобразовать Observable в Promise только после сохранения ссылки внутри компонента ngOnInit например this.dataSubscription = this.dataService.getData().toPromise()..., но все же, передовую практику, попытайтесь понять Observables и не превращать их в Promises, потому что вы теряете столько энергии.

class HeroListComponent implements OnInit, OnDestroy {
  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataSubscription = this.dataService.getData();
  }

  ngOnDestroy() {
    this.requestSubscription.unsubscribe();
  }
}