Angular2多API数据获取异常：仅首个API数据可在页面显示

Hey there! Let's break down this tricky issue you're hitting—when individual APIs work fine but only the first one loads data in your Angular component, and the rest kick in only when you comment the first. This is a super common gotcha with asynchronous requests in Angular, so let's walk through the most likely fixes:

1. You're Overwriting the Same Subscription Variable #

This is the #1 culprit here. If you're using a single variable to hold all your subscriptions, the second API call will overwrite the first one, canceling its data stream before it can finish.

Bad Example: #

private apiSubscription: Subscription;

ngOnInit() {
  // First call gets overwritten by the second
  this.apiSubscription = this.apiService.getCountPhones().subscribe(data => {
    this.countPhones = data;
  });

  this.apiSubscription = this.apiService.getOtherData().subscribe(data => {
    this.otherData = data;
  });
}

Fix: #

Use separate variables for each subscription, or store them in an array to clean up later:

private subscriptions: Subscription[] = [];

ngOnInit() {
  this.subscriptions.push(
    this.apiService.getCountPhones().subscribe(data => {
      this.countPhones = data;
    })
  );

  this.subscriptions.push(
    this.apiService.getOtherData().subscribe(data => {
      this.otherData = data;
    })
  );
}

// Don't forget to clean up subscriptions on component destroy
ngOnDestroy() {
  this.subscriptions.forEach(sub => sub.unsubscribe());
}

2. Use forkJoin for Parallel API Calls (Recommended) #

If you need data from multiple APIs at once, using RxJS's forkJoin is a cleaner approach. It waits for all requests to complete and returns all data in one go, eliminating the risk of subscription overwrites.

Example: #

import { forkJoin } from 'rxjs';

ngOnInit() {
  forkJoin([
    this.apiService.getCountPhones(),
    this.apiService.getOtherData()
    // Add more API calls here as needed
  ]).subscribe({
    next: ([countPhonesData, otherData]) => {
      this.countPhones = countPhonesData;
      this.otherData = otherData;
    },
    error: err => console.error('One of the API requests failed:', err)
  });
}

3. Check for Template Binding Mistakes #

Sometimes the issue isn't with the API calls at all—double-check your HTML template to make sure you're binding to the correct component variables. For example:

<!-- Correct -->
<div>Total Phones: {{ countPhones }}</div>
<div>Other Data: {{ otherData }}</div>

<!-- Incorrect (same variable used twice) -->
<div>Total Phones: {{ countPhones }}</div>
<div>Other Data: {{ countPhones }}</div>

4. Verify Your API Service Setup #

Make sure each API method in your service returns a fresh HttpClient request—don't reuse the same Observable instance across calls. Here's the correct way:

// API Service (correct implementation)
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ApiService {
  constructor(private http: HttpClient) {}

  getCountPhones() {
    return this.http.get('/api/countphones'); // Fresh request every time
  }

  getOtherData() {
    return this.http.get('/api/otherdata'); // Fresh request every time
  }
}

5. Add Error Handling to Subscriptions #

Even if your APIs work alone, there might be silent errors when running them together (like missing auth headers, CORS quirks, etc.). Adding error handlers will help you spot issues:

this.apiService.getCountPhones().subscribe({
  next: data => this.countPhones = data,
  error: err => console.error('Count Phones API Error:', err)
});

this.apiService.getOtherData().subscribe({
  next: data => this.otherData = data,
  error: err => console.error('Other Data API Error:', err)
});

Start with checking for subscription overwrites first—it's the most likely fix. If that doesn't work, try the forkJoin approach, and don't forget to double-check your template bindings!

内容的提问来源于stack exchange，提问作者Akshay Sharma