Angular中HTTP POST请求添加pipe(delay)后错误响应被忽略问题

核心原因 #

RxJS 内置的delay操作符默认仅对正常的next事件通知生效，error、complete类型的通知会直接透传给下游订阅者，不会应用延迟配置。你遇到的404请求属于error类通知，所以会立刻触发错误回调，看不到延迟效果。

解决方法 #

如果需要让错误也遵循延迟规则，可以用以下两种常用方案：

方案一：使用materialize + dematerialize组合操作符 #

这组操作符会把源Observable所有类型的通知（next/error/complete）都包装为普通的Notification对象，让delay可以统一处理所有通知，处理完成后再解封为原始通知类型：

import { materialize, delay, dematerialize } from 'rxjs/operators';

this.myService.sendRequest("")
  .pipe(
    materialize(),
    delay(10000),
    dematerialize()
  )
  .subscribe(
    res => console.log(res),
    (err: HttpErrorResponse) => console.log(err.message)
  )

方案二：使用delayWhen+catchError单独处理错误 #

如果需要更灵活的分别配置正常返回和错误的延迟时长，可以用该方案：

import { delayWhen, of, catchError } from 'rxjs/operators';

this.myService.sendRequest("")
  .pipe(
    delayWhen(() => of(null).pipe(delay(10000))),
    catchError(err => of(err).pipe(delay(10000)))
  )
  .subscribe(
    res => console.log(res),
    (err: HttpErrorResponse) => console.log(err.message)
  )

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