각도 2 내 4 API 호출이 실행되기 전에 이전 호출이 끝나기를 기다리지 않는 이유는 무엇입니까?

Question

form/component은 "저장"을 수행하기 위해 4 개의 별도 API 호출을 수행해야합니다. 정말로, 그 거래 중 하나만 다른 3 거래를 기다려야하지만, 어쨌든 4 개를 모두 안전하게 연결하고 싶었습니다. 나는이 기능을 실행하세요 (과 응답이 돌아 오지) 것을 정확하게 순서를 알 수 있도록 내가 메시지를 기록해야하는 save{number} 각 함수 내부

save() { 
    this.save1(saveObject1) 
     .subscribe(response => { 
      if (response === 0) { 
       this.processErrorResult('save1'); 
      } 

      this.save2(saveObject2) 
       .subscribe(response2 => { 
        if (response2 === 0) { 
         this.processErrorResult('save1'); 
        } 

        this.save3(saveObject3) 
         .subscribe(response3 => { 
          if (response3 === 0) { 
           this.processErrorResult('save1'); 
          } 

          if (this.noErrorsInFirst3Saves()) { 
           this.save4(saveObject4) 
            .subscribe(response4 => { 
             if (response4 === 0) { 
              this.processErrorResult('save1'); 
             } 

             if (!this.hasErrors()) { 
              this.router.navigate(['confirmation']); 
             } 
            }); 
          } 
         }); 
       }); 
     }); 
} 

private save1(saveObject: any): Observable<int> { 
    this.api.save1(saveObject) 
     .subscribe(successful => { 
      return Observable.of(1); 
     }, failed => { 
      return Observable.of(0); 
     }); 
} 

private save2(saveObject: any): Observable<int> { 
    this.api.save2(saveObject) 
     .subscribe(successful => { 
      return Observable.of(1); 
     }, failed => { 
      return Observable.of(0); 
     }); 
} 

private save3(saveObject: any): Observable<int> { 
    this.api.save3(saveObject) 
     .subscribe(successful => { 
      return Observable.of(1); 
     }, failed => { 
      return Observable.of(0); 
     }); 
} 

private save4(saveObject: any): Observable<int> { 
    this.api.save4(saveObject) 
     .subscribe(successful => { 
      return Observable.of(1); 
     }, failed => { 
      return Observable.of(0); 
     }); 
} 

: 여기

는 내가 설정을 가지고 방법입니다.

저장을 클릭하면 [거의] 즉시 내 확인 페이지로 리디렉션됩니다. 크롬 창 도구에서 내 콘솔 창을보고 API 응답의 응답을 볼 수 있습니다.

이 설치 프로그램이 이러한 트랜잭션의 명시 적 연결을 허용하지 않는 이유는 무엇입니까? 나는 Angular 1에서 이것을 알고 promise과 .then(response => {});을 사용하는 것이 매우 쉽습니다. 즉 다른의 내가 생각할 수있는

유일한 것은, 항상 크롬 개발 도구의 네트워크 패널에서이 호출을 보여줍니다, 그것은 get/post/put/delete을인지 모든 API 호출을위한 것입니다. 첫 번째 호출은 으로 설정되고 후속 호출은 get/post/put/delete이고 그에 따라 RequestMethod이 설정됩니다.

필자가 최근에 사용한 모든 응용 프로그램에서 (복제 전화)를 본 적이 기억이 안납니다 (어쩌면 그다지주의를 기울이지 않은 것 같습니다). 아마도 API의 표준 작동 절차 일 것입니다. 전화.

여기에 아이디어가 있습니까?

편집 :

private save1(saveObject: any): Observable<number> { 
    if (saveObject.hasChanges()) { 
     return this.api.save1(saveObject) 
      .map(successful => { 
       return this.parseSaveResponse(successful, saveObject, true); // true indicates a successful API response 
      }) 
      .catch(failed => { 
       return this.parseSaveResponse(successful, saveObject, false); // false indicates a successful API response 
      }); 
    } else { 
     return Observable.of(-1); // no changes necessary, return immediately 
    } 
} 

private parseSaveResponse(response: any, saveObject: any, transactionSuccessful: boolean) { 
    this.logService.logTransaction({transactionType}, saveObject, response, transactionSuccessful); 

    if (!transactionSuccessful) { 
     // add to error list object to be displayed on the form 
     return 0; 
    } 

    return 1; 
} 

: 나는 당신의 대답을 구현하기 위해 노력하지만, 여전히 구현하는 방법에 조금 혼란 스러워요

아래 해리의 제안 대답에 대응, 여기 내 설정에 대해 자세히 살펴입니다 이 점에 얻는 경우가 .catch({}); 줄에 나에게 오류를 던지고

말 :

Argument of type '(error: any) => 0 | 1' is not assignable to parameter of type '(err: any, caught: Observable<0 | 1>) => ObservableInput<{}>'. Type '0 | 1' is not assignable to type 'ObservableInput<{}>'. Type '0' is not assignable to type 'ObservableInput<{}>'.)

Answer 1

Theres는 꽤 몇 가지 문제. 먼저 save1/save2/save3 메서드는 구독 할 수있는 API에서 관찰 가능 항목을 반환해야합니다.

두 번째로 Typescript에없는 유형을 사용하고 있습니다. 번을 사용하십시오.

방출 된 항목을 수정하려면 방출 된 항목을 다른 항목에 매핑하는지도 연산자를 추가 할 수 있습니다.

마지막으로 관찰 가능 항목 내에서 관찰 가능 항목을 구독하지 마십시오. flatMap 연산자를 사용하여 관측 대상을 함께 연결할 수 있습니다. 이것은 Observable에 의해 방출 된 항목을 Observables로 변환 한 다음, 단일 Observable로 그것들의 방출을 평평하게합니다.

save() { 
    this.save1(saveObject1) 
    .flatMap(response1 => this.save2(saveObject2)) 
    .flatMap(response2 => { 
     if (response2 === 0) { 
     // handle error 
     } 
     return this.save3(saveObject3); 
    }) 
    .flatMap(() => this.save4(saveObject4)) 
    .subscribe(response4 => { 
     // do redirect 
    }); 
    } 

체인 rxjs 통화에서 switchmap 변환 연산자로

http://reactivex.io/documentation/operators/flatmap.html

Answer 2

당신이 관찰 대상을 "돌려줘야"한다고 생각합니다. 예 :

변경이 :

this.api.save1(saveObject) 

사람 : 공헌 할 수있는 코드와

return this.api.save1(saveObject)