Angular中结合Resource API与Signals解决重复请求问题

问题根源 #

1. 调用setFullTextSearch时，先后更新pageIndex和fullTextSearch两个信号，导致accountsCriteria这个computed信号两次重新计算，进而触发resource发起两次后端请求。
2. 后端返回分页参数后更新pageSize和pageIndex时，会再次触发accountsCriteria变化，引发循环请求。
3. PageEvent同时更新两个分页参数时，同样会导致多次请求触发。

解决方案 #

1. 使用batchUpdate合并信号更新，避免多次触发请求 #

Angular的batchUpdate可以将多个信号更新合并为一次，确保依赖这些信号的computed只重新计算一次，从而避免重复请求。

修改setFullTextSearch和handlePageEvent：

import { batchUpdate } from '@angular/core';

// 搜索文本更新时合并分页重置操作
setFullTextSearch(val: string) {
  batchUpdate(() => {
    this.pageIndex.set(0);
    this.fullTextSearch.set(val);
  });
}

// 分页事件处理时合并参数更新
handlePageEvent(event: PageEvent) {
  batchUpdate(() => {
    this.pageIndex.set(event.pageIndex);
    this.pageSize.set(event.pageSize);
  });
}

2. 用Effect手动控制请求时机，避免后端响应导致的循环请求 #

放弃resource的自动请求触发，改用effect监听查询条件变化，同时添加标志位区分用户操作和后端响应更新，防止循环请求：

完整改写代码：

import { signal, computed, effect, batchUpdate } from '@angular/core';
import { toPromise } from '@angular/core/rxjs-interop';

// 基础状态信号
pageSize = signal<number>(20);
pageIndex = signal<number>(0);
totalSize = signal<number>(0);
fullTextSearch = signal<string>('');
accounts = signal<AccountSearchEntry[]>([]);
reloading = signal<boolean>(false);

// 标记是否正在从后端响应更新参数，避免循环请求
private isUpdatingFromResponse = signal(false);

// 计算查询条件
accountsCriteria = computed(() => ({
  request: new AccountSearchRequest(this.fullTextSearch()),
  pageSize: this.pageSize(),
  pageIndex: this.pageIndex()
}));

constructor() {
  // 监听查询条件变化，触发请求
  effect(() => {
    const criteria = this.accountsCriteria();
    // 后端响应更新参数时，跳过请求触发
    if (this.isUpdatingFromResponse()) return;

    this.reloading.set(true);
    // 将Observable转为Promise处理响应
    toPromise(this.searchService.searchAccounts(
      criteria.request,
      criteria.pageIndex,
      criteria.pageSize
    ))
    .then(response => {
      const p = response.result;
      // 标记当前为后端响应更新，避免触发新请求
      this.isUpdatingFromResponse.set(true);
      // 合并更新所有状态
      batchUpdate(() => {
        this.accounts.set(p.content);
        this.pageSize.set(p.pageable.size);
        this.pageIndex.set(p.pageable.number);
        this.totalSize.set(p.totalSize);
      });
      this.isUpdatingFromResponse.set(false);
    })
    .catch(error => {
      // 这里添加错误处理逻辑，比如提示用户
      console.error('搜索账户失败:', error);
    })
    .finally(() => {
      this.reloading.set(false);
    });
  }, { 
    // 允许在effect中更新信号
    allowSignalWrites: true 
  });
}

关键说明 #

• batchUpdate确保多个信号更新只会触发一次computed重新计算，从而避免重复请求。
• isUpdatingFromResponse标志位用于区分用户主动操作和后端响应同步，彻底解决后端更新分页参数导致的循环请求问题。
• 改用effect替代resource，获得更灵活的请求时机控制，适配复杂的双向参数同步场景。

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