如何从Observable中两次获取数据？需在服务与组件中同时获取请求数据

我来帮你梳理下这个问题，你现在的需求是在Angular的服务和组件里都能拿到HTTP请求完成后的数据，目前用的是直接从服务里提取变量的方式，其实有更符合Angular最佳实践的方案，我给你两种常用的实现方式：

这种方式既让服务内部保存请求结果，同时把Observable返回给组件订阅，双方都能拿到数据，还能避免不必要的重复请求。

服务代码：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  itemList: any[] = [];

  constructor(private http: HttpClient) {}

  getData(): Observable<any[]> {
    return this.http.get<any>('items.json').pipe(
      // 用tap操作符在服务内部保存数据，不会影响Observable的数据流
      tap(data => {
        this.itemList = data['itemList'];
      })
    );
  }
}

组件代码：

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-item',
  templateUrl: './item.component.html'
})
export class ItemComponent implements OnInit {
  items: any[] = [];

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.getItems();
  }

  getItems() {
    this.dataService.getData().subscribe(data => {
      // 组件直接从数据流拿到数据
      this.items = data;
      // 也可以选择直接访问服务里保存的itemList
      // this.items = this.dataService.itemList;
    });
  }
}

如果你的项目中有多个组件需要共享这份数据，或者组件可能在请求完成后才初始化，用BehaviorSubject会更灵活——它能保存当前最新值，任何订阅者都能立即拿到最新数据，不用等待重新请求。

服务代码：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { tap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  // 初始化一个空数组作为默认值
  private itemListSubject = new BehaviorSubject<any[]>([]);
  // 对外暴露只读的Observable，防止外部直接修改Subject的值
  itemList$: Observable<any[]> = this.itemListSubject.asObservable();

  constructor(private http: HttpClient) {}

  getData(): Observable<any[]> {
    return this.http.get<any>('items.json').pipe(
      tap(data => {
        // 更新Subject的值，所有订阅的地方都会收到通知
        this.itemListSubject.next(data['itemList']);
      })
    );
  }

  // 可选：提供同步获取当前数据的方法
  getCurrentItemList(): any[] {
    return this.itemListSubject.value;
  }
}

组件代码：

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

@Component({
  selector: 'app-item',
  templateUrl: './item.component.html'
})
export class ItemComponent implements OnInit, OnDestroy {
  items: any[] = [];
  private dataSubscription: Subscription | undefined;

  constructor(private dataService: DataService) { }

  ngOnInit() {
    // 先订阅数据，哪怕请求已经完成，也能立即拿到最新值
    this.dataSubscription = this.dataService.itemList$.subscribe(list => {
      this.items = list;
    });
    // 发起请求（如果之前没发起过的话）
    this.dataService.getData().subscribe();
  }

  ngOnDestroy() {
    // 销毁订阅，避免内存泄漏
    this.dataSubscription?.unsubscribe();
  }
}

这两种方式都能完美解决你的需求，相比你原来的方法，它们更符合Angular异步编程的规范，还能避免潜在的时序问题（比如组件在请求完成前访问服务变量得到undefined）。

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