Angular应用启动后如何预加载API中的组件数据避免重复请求？

第一步：创建共享用户数据服务 #

首先创建全局单例的共享服务，用来缓存用户数据、管理请求状态，避免重复发起HTTP请求。
执行CLI命令生成服务：
ng generate service services/user-data

服务代码示例：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable, of } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';
import { User } from '../types/user'; // 替换为你自己定义的用户类型

@Injectable({ providedIn: 'root' })
export class UserDataService {
  // 存储用户列表缓存
  private userList$ = new BehaviorSubject<User[] | null>(null);
  // 标记请求状态，避免重复发起请求
  private isLoading = false;

  constructor(private http: HttpClient) {}

  // 对外提供的获取用户列表方法
  getUserList(): Observable<User[] | null> {
    // 已有缓存直接返回缓存数据
    if (this.userList$.value) {
      return of(this.userList$.value);
    }
    // 请求进行中直接返回可观察对象，等待请求完成后自动推送结果
    if (this.isLoading) {
      return this.userList$.asObservable();
    }
    // 无缓存且无进行中的请求，发起HTTP请求
    this.isLoading = true;
    return this.http.get<User[]>('/api/users').pipe(
      tap(res => {
        this.userList$.next(res);
        this.isLoading = false;
      }),
      catchError(err => {
        this.isLoading = false;
        // 可根据业务需求补充错误处理逻辑
        return of(null);
      })
    );
  }

  // 预加载触发方法，外部调用主动拉取数据存入缓存
  preloadUserList(): void {
    if (!this.userList$.value && !this.isLoading) {
      this.getUserList().subscribe();
    }
  }
}

第二步：应用加载完成后触发预加载 #

选择在首次路由导航完成后触发预加载，完全不阻塞应用启动流程，符合你不使用APP_INITIALIZER的要求。
在根组件AppComponent中添加逻辑：

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter, take } from 'rxjs/operators';
import { UserDataService } from './services/user-data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(
    private router: Router,
    private userDataService: UserDataService
  ) {}

  ngOnInit(): void {
    // 监听第一次路由导航完成事件，触发预加载
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      take(1)
    ).subscribe(() => {
      this.userDataService.preloadUserList();
    });
  }
}

如果你的应用没有使用路由，也可以把预加载触发逻辑放在AppComponent的ngAfterViewInit生命周期中，保证应用渲染完成后再发起请求。

第三步：复用的用户列表组件直接读取缓存 #

用户列表组件不需要再单独发起HTTP请求，直接调用共享服务的方法获取数据即可：

import { Component, OnInit } from '@angular/core';
import { UserDataService } from '../services/user-data.service';
import { User } from '../types/user';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html'
})
export class UserListComponent implements OnInit {
  userList: User[] | null = null;

  constructor(private userDataService: UserDataService) {}

  ngOnInit(): void {
    this.userDataService.getUserList().subscribe(res => {
      if (res) {
        this.userList = res;
      }
    });
  }
}

方案特性 #

• 无启动阻塞：预加载逻辑在应用首屏加载完成后触发，不会拖慢应用启动速度
• 全局唯一请求：无论用户列表组件复用多少次，全局只会发起一次HTTP请求
• 兼容边界场景：如果预加载未完成时用户就打开了带用户列表的页面，也不会重复发起请求，组件会等待预加载请求完成后自动拿到数据
• 纯原生实现：完全基于Angular自带能力开发，不需要引入额外依赖

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