Angular提交无效表单触发两次POST请求，如何将逻辑整合到单个Observable中

• 核心问题出在httpPostGlobal的嵌套订阅反模式：手动创建Observable时，内层getTokenFromServiceData、http.post的两次独立订阅和外层返回的Observable生命周期没有绑定，错误场景（422）下没有正常结束流会导致订阅残留，重复触发POST请求。
• 成功场景（200/201/204）下你在successCallback里主动调用了observer.complete()结束了外层流，所以不会出现重复请求。

直接用RxJS高阶操作符switchMap把拿token、发POST请求的逻辑整合成单链路Observable，不需要手动创建Observable、也不需要嵌套订阅：

public httpPostGlobal<T>(path: string, data: any): Observable<HttpResponse<T>> {
  return this.getTokenFromServiceData().pipe(
    switchMap(userToken => {
      const httpOptions = {
        observe: 'response' as const,
        headers: new HttpHeaders({
          Authorization: `Bearer ${userToken}`, // 原代码此处漏填token取值逻辑，按需补全即可
          accept: 'application/json'
        }),
      };
      return this.http.post<T>(`${environment.url}${path}`, data, httpOptions);
    }),
    tap(response => {
      // 原successCallback的校验逻辑直接迁移至此，不符合条件直接抛错
      const validStatus = [200, 201, 204].includes(response.status);
      const validStatusText = [HttpService.OK, HttpService.CREATED, HttpService.NO_CONTENT].includes(response.statusText);
      if (!validStatus || !validStatusText) {
        throw response;
      }
    }),
    catchError((err: HttpErrorResponse | HttpResponse<T>) => throwError(() => err))
  );
}

• 提交按钮加loading状态锁，点击后置灰直到请求返回，避免用户多次点击触发重复提交：

// 组件内新增状态变量
isSubmitting = false;

onSubmitForm() {
  if (this.isSubmitting) return;
  this.isSubmitting = true;
  this.service.addUserName(this.formG.value).subscribe({
    next: (res:any) => {
      console.log('success response');
    },
    error: (err) => {
      console.error('请求失败', err);
    },
    finalize: () => {
      // 无论成功失败都重置提交状态
      this.isSubmitting = false;
    }
  }) 
}

• 组件销毁时主动取消订阅，避免内存泄漏。

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