Angular 2+ HTTP请求：成功/错误响应时均保持加载Spinner最短时长

嘿，我碰到过类似的问题，你的核心痛点是API请求返回错误时，原来的combineLatest流会因为错误提前终止，导致Spinner没法维持至少1秒的显示时长对吧？我来帮你搞定这个问题。

问题根源 #

原来的代码里，combineLatest有个特性：只要其中一个源Observable抛出错误，整个组合流就会立即终止。当API返回4/5xx错误时，this.service.apiCall()这个Observable会抛出错误，直接触发finalize回调，Spinner就提前消失了，完全没等到1秒的最小显示要求。

解决方案：确保错误不终止组合流 #

我们需要把API请求的错误包装起来，让它不会直接终止流，这样组合流就能同时等待1秒timer和API请求结果（成功/错误），只有当两者都完成后，才会隐藏Spinner。下面给你两种可行的实现方式：

方式1：用materialize包装事件（RxJS标准做法） #

materialize会把Observable的所有事件（next、error、complete）都包装成Notification对象，这样流不会因为error而终止，直到complete事件触发：

load() {
  this.loading = true;

  // 包装API请求，将所有事件转换为Notification对象
  const apiCall$ = this.service.apiCall().pipe(
    materialize()
  );

  combineLatest(timer(1000), apiCall$)
    .pipe(
      finalize(() => { this.loading = false; }),
      map(([_, notification]) => notification)
    )
    .subscribe({
      next: (notification) => {
        if (notification.kind === 'N') {
          // 请求成功，处理返回数据
          console.log('请求成功:', notification.value);
        } else if (notification.kind === 'E') {
          // 请求出错，处理错误信息
          console.error('请求失败:', notification.error);
        }
      }
    });
}

方式2：用catchError统一成功/错误格式 #

这种方式更直观，我们捕获API请求的错误，转换成一个包含错误信息的正常数据流，让组合流能继续执行到timer完成：

load() {
  this.loading = true;

  // 包装API请求，统一成功/错误的返回格式
  const apiCall$ = this.service.apiCall().pipe(
    map(data => ({ success: true, data })),
    catchError(error => of({ success: false, error }))
  );

  combineLatest(timer(1000), apiCall$)
    .pipe(
      finalize(() => { this.loading = false; }),
      map(([_, result]) => result)
    )
    .subscribe(result => {
      if (result.success) {
        console.log('请求成功:', result.data);
      } else {
        console.error('请求失败:', result.error);
      }
    });
}

为什么这两种方式有效？ #

不管用哪种方式，我们都确保了API请求的错误不会直接终止组合流。combineLatest会等待timer的1秒完成，同时也会等待API请求的所有事件处理完毕（不管是成功还是错误），只有当两者都完成后，才会触发finalize隐藏Spinner，完美满足你的需求：

• 请求耗时<1秒：Spinner显示满1秒
• 请求耗时>1秒：Spinner显示至请求结束（成功/错误都一样）

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