Angular返回404时POST请求重复发送问题求助

问题现象 #

使用Angular结合Promise发送POST请求，当接口返回200状态码时流程正常，但返回404状态码时，该API会被自动重复调用一次。请求截图如下：

相关代码实现如下：

组件调用代码 #

async checkCrValidation() {
    this.loaderService.present(
        await this.helperMethod.translateKeys('i18n.general.savingdata')
    );
    this.userSerivce
        .sendCrValidation(this.authorized_body)
        .then(async (data) => {
            this.toasterService.successToast(
                await this.helperMethod.translateKeys(
                    'i18n.general.success-CrNumber'
                )
            );
            this.loaderService.dismiss();
            this.dismiss(true);
        })
        .catch(async (err) => {
            this.loaderService.dismiss();
            this.toasterService.errorToast(err.error.error.message);
            return throwError(err);
        });
}

服务层代码 #

sendCrValidation(body): Promise<Request> {
   return this.rest.post('user/cr-validation', body).toPromise();
}

REST请求封装代码 #

public post(
        relativeUrl: string,
        body: any,
        restOptions: RestOptions = this.initRestOptions
    ): Observable<any> {
        const options = {
            headers: this.getHeaders(restOptions.customHeaders),
        };

        if (restOptions.withHeaders) {
            options['observe'] = 'response';
        }

        return this.http
            .post(`${environment.baseURL}${relativeUrl}`, body, options)
            .pipe(catchError(this.handleError.bind(this)));
    }

问题排查方向 #

1. 检查handleError方法实现
   目前post方法的catchError绑定了handleError，如果该方法内部存在重试逻辑（比如RxJS的retry操作符），或者错误处理不当导致Observable被重新订阅，就会触发第二次请求。需确认handleError是否正确返回错误Observable，而非触发重试。

2. 排查HTTP拦截器
   项目中如果有自定义HTTP拦截器，可能配置了针对错误状态码的重试策略（比如对4xx错误自动重试），这是引发重复请求的常见原因。检查拦截器代码是否包含retry或类似重试逻辑。

3. Promise转换的潜在问题
   使用toPromise()将Observable转换为Promise时，若错误处理混淆了RxJS和Promise的错误传递机制，可能导致意外重试。比如catch块中使用return throwError(err)（RxJS方法）对Promise无意义，反而可能引发异常。

4. 后端重定向可能性
   少数情况下，后端返回404时伴随Location重定向响应头，会导致浏览器自动发起第二次请求。可通过浏览器开发者工具查看响应头是否包含该字段。

解决方案 #

1. 修正错误处理逻辑
   确保handleError正确返回错误Observable，示例：

   private handleError(error: HttpErrorResponse) {
       console.error('请求错误:', error);
       return throwError(() => new Error(error.message || '服务器错误'));
   }
   

2. 移除不必要的错误重抛
   组件catch块中移除return throwError(err)，Promise的catch无需返回RxJS错误Observable：

   .catch(async (err) => {
       this.loaderService.dismiss();
       this.toasterService.errorToast(err.error.error.message);
   });
   

3. 改用RxJS订阅代替Promise转换
   Angular官方推荐优先使用RxJS Observable，避免转换过程中的潜在问题。重构代码：

   • 服务层修改：

     sendCrValidation(body): Observable<any> {
        return this.rest.post('user/cr-validation', body);
     }
     

   • 组件调用修改：

     async checkCrValidation() {
         this.loaderService.present(
             await this.helperMethod.translateKeys('i18n.general.savingdata')
         );
         this.userSerivce.sendCrValidation(this.authorized_body)
             .subscribe({
                 next: async (data) => {
                     this.toasterService.successToast(
                         await this.helperMethod.translateKeys(
                             'i18n.general.success-CrNumber'
                         )
                     );
                     this.loaderService.dismiss();
                     this.dismiss(true);
                 },
                 error: async (err) => {
                     this.loaderService.dismiss();
                     this.toasterService.errorToast(err.error.error.message);
                 }
             });
     }
     

4. 调整HTTP拦截器重试逻辑
   若拦截器存在重试逻辑，可针对404状态码排除重试：

   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
       return next.handle(request).pipe(
           retry(err => {
               return err.status !== 404;
           })
       );
   }
   

内容的提问来源于stack exchange，提问作者Abdullah Al Shaalan