Angular 4条件触发HTTP GET请求及重试+表单更新后列表同步问题

一、实现满足条件后发起GET请求，不满足则重试 #

在Angular 4中，我们可以借助RxJS的操作符（比如retryWhen、filter、delay）来实现这个逻辑。核心思路是：发起请求前先检查条件，不满足的话就延迟一段时间后重试，直到条件满足再真正发起请求。

举个通用的例子，假设我们要检查的条件是某个变量状态是否符合预期：

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/retryWhen';
import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/filter';
import 'rxjs/add/observable/of';

// 模拟你的条件检查逻辑，这里可以替换成实际要判断的规则
private isConditionSatisfied(): boolean {
  // 比如检查更新服务中的saveFunction是否为null
  return this.updateService.saveFunction === null;
}

// 封装带条件检查的GET请求
fetchTargetData(): Observable<any> {
  return Observable.defer(() => {
    // 先检查条件，满足就发起请求
    if (this.isConditionSatisfied()) {
      return this.http.get(`${this.url}netwealth`, this.requestOption)
        .map((r: Response) => r.json());
    } else {
      // 条件不满足，抛出错误让retryWhen处理重试逻辑
      throw new Error('Condition not met, will retry');
    }
  }).retryWhen(errors => {
    return errors
      .delay(500) // 每次重试前延迟500ms，避免频繁请求给服务器造成压力
      .filter(() => !this.isConditionSatisfied()); // 只要条件还不满足，就继续重试
  });
}

这段代码的关键逻辑：

• defer操作符会在订阅时才执行内部函数，确保每次重试都会重新检查条件
• 条件不满足时主动抛出错误，触发retryWhen的重试流程
• retryWhen捕获错误后，延迟一段时间再重新订阅原Observable，直到条件满足时正常发起请求

二、解决表单更新后列表页GET请求提前执行的问题 #

针对你描述的场景：表单修改后跳转列表页，列表页的GET请求已经执行，但此时saveFunction还没被置为null，导致拿到旧数据。我们可以直接把条件检查逻辑嵌入到你的现有请求代码中。

假设你的列表页服务已经注入了updateService，修改后的请求代码如下：

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/retryWhen';
import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/filter';
import 'rxjs/add/observable/defer';

// 修改你的列表页请求方法
getNetWealthList(): Observable<any> {
  return Observable.defer(() => {
    // 检查updateService中的saveFunction是否为null
    if (this.updateService.saveFunction === null) {
      // 条件满足，发起GET请求获取最新数据
      return this.http.get(`${this.url}netwealth`, this.requestOption)
        .map((r: Response) => r.json());
    } else {
      // 保存操作还没完成，抛出错误触发重试
      throw new Error('Save operation is still in progress');
    }
  }).retryWhen(errors => {
    return errors
      .delay(300) // 根据实际业务调整延迟时间，比如300ms
      .filter(() => this.updateService.saveFunction !== null); // 只要saveFunction不为null就继续重试
  });
}

更优雅的响应式方案 #

你也可以在updateService中把saveFunction改为一个Observable（比如BehaviorSubject），这样无需轮询检查，而是监听状态变化：

// 在updateService中定义状态流
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

saveCompleted$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

// 当数据更新完成后，更新状态
this.saveFunction = null;
this.saveCompleted$.next(true);

然后在列表页中，等待状态流发出完成信号后再发起请求：

getNetWealthList(): Observable<any> {
  return this.updateService.saveCompleted$
    .filter(isCompleted => isCompleted)
    .take(1) // 只取第一个完成信号，避免重复触发请求
    .switchMap(() => {
      return this.http.get(`${this.url}netwealth`, this.requestOption)
        .map((r: Response) => r.json());
    });
}

这种响应式的方式比轮询更高效，状态一变化就会触发请求，无需反复检查。

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