Angular - 检索数据的最佳方法是什么

Question

I've been facing a few alternatives in retrieving data from a simple API call when you will always get a single response, and I want to know what would be the best approach.

Initially I've used the plain subscribe , then I've learnt about memory leaks. Later I've used either _service.pipe(take(1)).subscribe or packages like untilDestroyed that cancel the subscription upon component destruction.

Assigning the subscription to a variable and unsubscribing on ngOnDestroy is the least desirable option for me.

Another option is converting the observable to a promise and then use a bit of syntactic sugar with async/await .

Since I am periodically refactoring my code, the question remains. What is the best approach and why?

Answer 1

Using subscribe with http requests is totally fine and you should't worry so much about memory leaks because the stream completes right after the data from the server is passed trough it.

You should worry about the subscriptions on long-lived observables/subjects which don't complete automatically after the first value. In that case you can use operators or the subscription object in order to manage those subscriptions. Some useful operators are take() , first() , takeUntil() , takeWhile()

One approach that I like is to create an observable on my component and I often call it isAlive$ and inside the ngOnDestroy I emit a value from from this subject in order to cancel all my subscriptions.

class Cmp {
  isAlive$ = new Subject();
  
  ngOnInit() {
     this.someLongLivedObservable$.pipe(takeUntil(this.isAlive$)).subscribe(() => { 
        // do something 
    });
  }

  ngOnDestroy() {
    this.isAlive$.next();
    this.isAlive$.complete();
  }
}

Also you can connect subscriptions like:

const subscription1 = observable1.subscribe(val => console.log(val));
const subscription2 = observable2.subscribe(val => console.log(val));
subscription1.add(subscription2);

When we join subscriptions we can unsubscribe to all the subscriptions that were joined by calling unsubscribe on the first.