Как правильно подписаться Angular HttpClient Observable? - PullRequest
Новая
       56

Как правильно подписаться Angular HttpClient Observable?

0 голосов
/ 22 апреля 2020

Пример использования HeroService из angular документации.

Ниже приведен метод POST в HeroService 

addHero (hero: Hero): Observable<Hero> {
    return this.http.post<Hero>(this.heroesUrl, hero, httpOptions)
           .pipe(
            catchError(this.handleError('addHero', hero))
            );
   }

Мы можем видеть, что каждый раз, когда вызывается addHero, возвращается новый Observable.

Хорошо, теперь вызов службы от HeroComponent 

this.heroesService
  .addHero(newHero)
  .subscribe(hero => this.heroes.push(hero));

Теперь в моем компоненте вызов службы добавления героев происходит очень часто один за другим. Каждый вызов addHero возвращает новый объект Observable, и он подписывается.

Мой вопрос заключается в том, как правильно подписаться на этот сервис в моем случае использования, когда addHero часто вызывается один за другим 1000 раз.

Я должен вызывать службу героя следующим образом 

addHero(){
  this.heroesService
  .addHero(newHero)
  .subscribe(hero => this.heroes.push(hero));
}

Или я должен вызывать службу героя следующим образом, так что для каждого вызова создается только один наблюдаемый объект 

const req = this.heroesService.addHero(newHero);

addHero(){
  req.subscribe(hero => this.heroes.push(hero));
}

В чем разница между обоими подходами, кроме того, что во втором подходе создается только один объект Observable. Также каковы недостатки или преимущества обоих подходов.

Для моего сценария, который является правильной реализацией? Второй подход имеет какое-то значение? Что будет с точки зрения утечки памяти, если я go при первом подходе?

Ответы [ 2 ]

0 голосов
/ 22 апреля 2020

HttpClient завершает внутренние вызовы после выполнения запроса, поэтому вам не придется сталкиваться с утечками памяти и ручной отменой подписки.

Оба ваших примера делают то же самое, но первый более читабелен.

0 голосов
/ 22 апреля 2020

Этот вариант предпочтителен, потому что после выполнения наблюдаемое будет завершено, и вы не сможете его повторно использовать. 

addHero(){
  this.heroesService
  .addHero(newHero)
  .subscribe(hero => this.heroes.push(hero));
}

В случае, если вам необходимо позвонить в службу 1000 раз за короткий промежуток времени, возможно, будет лучше позвонить выделенному Служба массового чтения.

Об утечках памяти.

Это безопасно, потому что this.http.post вернет Observable, что завершится любым первым результатом для успеха и для ошибки.

Отмена подписки ДОЛЖНА

Также вы должны отписаться, вы можете прочитать об этом здесь

...