在一個Observable中設定邏輯？角

當我發送無效的表單時，它會發送給我 2 次 http post 請求。

<form [formGroup]="formG" (submit)="onSubmitForm()">
 <input type="text formControlName="userName">
 <button type="submit">
</form>

里面 ts

   onSubmitForm() { 
    this.service.addUserName(this.formG.value).subscribe((res:any) => {
      console.log('succes response');
    }) 
  }

內部服務：

  public addUserName(userName) { 
    return this.httpClient.httpPostGlobal<any[]>(`addNewUser/${userName}`, null);
  }

httpPost有點復雜。作為全球服務制造。

httpPostGlobal 的內部全域服務是 ->

public httpPostGlobal<T>(path: string, data: any): Observable<HttpResponse<T>> {

    let postMetodData = (observer: Observer<HttpResponse<T>>) => {
        this.getTokenFromServiceData().subscribe(
            userToken => {
                let httpOptions = {
                    observe: 'response' as 'response',
                    headers: new HttpHeaders({
                        Authorization: ,
                        accept: 'application/json'
                    }),
                };

                this.http.post<T>(environment.url   path, data, httpOptions)
                    .pipe(
                        catchError((err: HttpErrorResponse) => {
                            return throwError(err);
                        }))
                    .subscribe(
                        response => this.successCallback(response, observer),
                        (error: HttpErrorResponse) => this.errorCallback(error, observer)
                    );
            }
        );
    };

    let obs = new Observable<HttpResponse<T>>(postMetodData);
    return obs;
}

這個函式內部有問題......可能是catchError，但我不知道。

唯一的問題是它重復了 2 次 http 請求。其他一切都有效。添加時，當回應為 200 或 201 時，其他一切正常。唯一的問題是當提交無效的表單并且后端回傳 422 時，它會觸發相同的請求 2 次，如果我在表單上只按一次提交。

successCallback 只是：

private successCallback<T>(response: HttpResponse<T>, observer: Observer<HttpResponse<T>>): void {
    if ((response.status === 200 || response.status === 204 || response.status === 201) &&
        (response.statusText === HttpService.OK || response.statusText === HttpService.NO_CONTENT
            || response.statusText === HttpService.CREATED)) {
        observer.next(response);
    } else {
        observer.error(response);
    }

    observer.complete();
}

uj5u.com熱心網友回復：

這里有一些奇怪的事情：

1. Authorization: , 這是空的？
2. errorCallback 被呼叫但我們沒有看到實作？

僅查看您的代碼，我會說將 2 個 api 呼叫發布到服務器的唯一情況是

this.http.post<T>(environment.url   path, data, httpOptions)

被呼叫兩次。您可以console.log(1)在之前添加一個以查看列印了多少次。

如果是這種情況，那么您可能有一個價值流??：

this.getTokenFromServiceData()

當某些呼叫失敗時，它會“再次”出現。

uj5u.com熱心網友回復：

您在這里訂閱了多個事件，無論第一個是否有效。相反，您應該將此邏輯放入一個 Observable 中。

我還修復了一些問題，并使用了一些打字稿來清理。

public httpPostGlobal<T>(path: string, data: any): Observable<HttpResponse<T>> {
  return this.getTokenFromServiceData().pipe(
    switchMap(userToken => {
      const httpOptions = {
        observe: 'response' as 'response', // this probably isnt needed as this is already the default value
        headers: new HttpHeaders({
          Authorization: `${userToken}`,
          accept: 'application/json',  // this probably isnt needed as this is already the default value
        }),
      };
      return this.http.post<T>(`${environment.url}${path}`, data, httpOptions);
    }),
    map(response => this.successCallback(response, observer)),
    catchError((err: HttpErrorResponse) => this.errorCallback(error, observer)),
  );
}

標籤：有角的

上一篇：需要從[object][object]獲取一個值

下一篇：如何更新子級中父級的物件資料