Angular开发中如何避免发起重复的API请求？

Angular 的 ActivatedRoute.params 属于热可观察对象，组件初始化完成后会立即推送当前路由的参数值，所以你在 ngOnInit 中先主动调用了一次 getCategoryList，紧接着订阅触发又调用了一次，自然产生了重复请求。

直接删除顶部独立的 this.getCategoryList() 调用，把所有调用逻辑都放到 params 订阅回调中即可。订阅的首次触发已经覆盖了页面初始化的场景，后续路由参数变化也能正常触发调用：

ngOnInit() {
  this.route.params.subscribe(params => {
    console.log("categoryChange");
    this.categoryId = params['cat'] || '';
    // 与原有逻辑保持一致，存在分类ID时才调用，不需要可以去掉if判断
    if (this.categoryId) {
      this.getCategoryList();
    }
    // 如果无分类ID时也需要调用，直接把方法调用提到if外面即可
  });
}

如果业务逻辑确实需要保留顶部的独立调用（比如无路由参数时的默认请求逻辑和带参数时的逻辑有拆分），可以添加首次加载标记位，过滤掉订阅的首次触发：

private isFirstInit = true;

ngOnInit() {
  this.getCategoryList();
  this.route.params.subscribe(params => {
    // 首次加载直接跳过，避免重复请求
    if (this.isFirstInit) {
      this.isFirstInit = false;
      return;
    }
    console.log("categoryChange");
    this.categoryId = params['cat'] || '';
    if (this.categoryId) {
      this.getCategoryList();
    }
  });
}

• 记得及时取消路由订阅避免内存泄漏：可以用 RxJS 的 takeUntil 操作符配合组件销毁生命周期实现，Angular 14+ 版本可以直接用 takeUntilDestroyed 简化代码。
• 建议用 switchMap 操作符封装请求逻辑：如果用户快速切换路由参数导致多个请求并发，switchMap 会自动取消未完成的旧请求，避免旧响应覆盖新数据的问题。

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