Angular 5中HttpClient的GET请求未关闭问题求助

Let's walk through the problems in your code and how to fix them to ensure your subscriptions are properly cleaned up and data flows correctly.

First, Address the Service Code Issues #

Your service has a few critical problems preventing proper subscription management and data emission:

1. Typo in BehaviorSubject emission: You’re referencing categories.next() instead of this.categories.next()—this won’t update your observable at all.
2. Invalid error handler: The error callback (error: any) => { sub } does nothing; it fails to handle errors or clean up the subscription.
3. Missing HttpClient injection: Your constructor doesn’t inject the HttpClient service, so this.http would be undefined.
4. Error-prone manual unsubscribe: Storing the subscription and unsubscribing in the complete callback is unnecessary for one-time requests.

Corrected Service Code

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject } from 'rxjs';
import { take } from 'rxjs/operators';
import { environment } from '../environments/environment';

// Define your interfaces
interface ResponseInterface {
  data: Category[];
}

interface Category {
  // Add your Category properties here
}

@Injectable({ providedIn: 'root' })
export class CategoryService {
  public categories: BehaviorSubject<Category[]> = new BehaviorSubject<Category[]>(null);

  constructor(private http: HttpClient) { // Inject HttpClient
    this.http.get<ResponseInterface>(`${environment.apiUrl}categories`)
      .pipe(take(1)) // Auto-completes after first emission, cleaning up the subscription
      .subscribe(
        (response) => {
          this.categories.next(response.data); // Fixed typo to use this.categories
        },
        (error: any) => {
          console.error('Failed to fetch categories:', error); // Proper error handling
          this.categories.next(null); // Optional: Reset state on error
        },
        () => {
          console.log('Categories fetch completed');
        }
      );
  }
}

The take(1) operator is key here—it tells the observable to emit only the first value and then complete automatically. This eliminates the need for manual unsubscribe, as the subscription is cleaned up immediately after the request finishes.

Next, Fix the Component Subscription #

Your component’s subscription can cause memory leaks if not cleaned up when the component is destroyed. Here are two recommended approaches:

Option 1: Use the Async Pipe (Recommended)

The Angular async pipe automatically handles subscribing and unsubscribing, making this the cleanest and most maintainable approach:

Component Class:

import { Component } from '@angular/core';
import { CategoryService } from './category.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-category-list',
  templateUrl: './category-list.component.html'
})
export class CategoryListComponent {
  categories$: Observable<Category[]>; // Observable for async pipe

  constructor(private service: CategoryService) {
    this.categories$ = this.service.categories.asObservable();
  }
}

Component Template:

<div *ngIf="categories$ | async as categories">
  <div *ngFor="let category of categories">
    <!-- Display your category data here -->
  </div>
</div>

Option 2: Manual Unsubscription

If you prefer to manage subscriptions manually, always unsubscribe when the component is destroyed:

Component Class:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { CategoryService } from './category.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-category-list',
  templateUrl: './category-list.component.html'
})
export class CategoryListComponent implements OnInit, OnDestroy {
  categories: Category[];
  private categorySubscription: Subscription;

  constructor(private service: CategoryService) {}

  ngOnInit() {
    this.categorySubscription = this.service.categories.subscribe(categories => {
      if (categories !== null) {
        this.categories = categories;
      }
    });
  }

  ngOnDestroy() {
    // Clean up subscription to prevent memory leaks
    if (this.categorySubscription) {
      this.categorySubscription.unsubscribe();
    }
  }
}

Key Takeaways #

• Always use this. when referencing class instance variables (like your BehaviorSubject).
• For one-time HTTP requests, use take(1) or first() operators to auto-complete the observable and clean up subscriptions.
• Components must clean up subscriptions to avoid memory leaks—use the async pipe for simplicity, or manual unsubscribe in ngOnDestroy.
• Never leave empty error handlers; always log or handle errors to debug issues effectively.

内容的提问来源于stack exchange，提问作者Simon Lüscher