Angular中HttpClient结合firstValueFrom出现二次报错的解决办法

问题场景 #

我使用如下Http拦截器处理服务端错误：

export class ServerErrorInterceptor implements HttpInterceptor {
    constructor(
        private appMessageService: AppMessageService) { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        return next.handle(request).pipe(
            catchError((error: HttpErrorResponse) => {
                this.appMessageService.handleError(error, 'Server request error');
                
                return of();
            })
        );
    }
}

同时在业务代码中结合HttpClient和firstValueFrom使用：

async create(request: any): Promise<void> {
    const response = this.http.post(this.url, request);
    await firstValueFrom(response);
}

原本期望拦截器返回of()后，create方法不会抛出错误，但实际拦截器显示错误信息后，又抛出了"sequence contains no elements"错误，需要调整管道避免二次报错。

原因分析 #

问题核心在于两者的行为特性：

• 无参数的of()会创建一个不发射任何值、直接进入完成状态的Observable
• firstValueFrom的逻辑是必须从Observable中获取至少一个值，若没有值则抛出"sequence contains no elements"错误

解决方案 #

方案1：修改拦截器，返回带默认值的Observable #

将拦截器中的return of();改为返回带有空值的Observable，让它能发射一个值后完成，满足firstValueFrom的要求：

catchError((error: HttpErrorResponse) => {
    this.appMessageService.handleError(error, 'Server request error');
    
    return of(null); // 或 of(undefined)，根据业务类型选择
})

方案2：调用firstValueFrom时指定默认值 #

如果不想修改拦截器逻辑，可以在调用firstValueFrom时传入defaultValue配置项，当Observable没有发射值时，自动返回默认值而非报错：

async create(request: any): Promise<void> {
    const response = this.http.post(this.url, request);
    await firstValueFrom(response, { defaultValue: undefined });
}

方案3：根据请求类型返回对应空值（可选优化） #

如果需要更贴合业务类型预期，可以根据请求的返回类型返回对应空值：

• 对于不需要返回值的请求（如POST/PUT）：返回of(undefined)
• 对于需要返回数组的GET请求：返回of([])
• 对于需要返回对象的GET请求：返回of({})

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