Angular: Как лучше обрабатывать вложенные вызовы API, особенно если последний зависит от результата первого - PullRequest
Новая
       24

Angular: Как лучше обрабатывать вложенные вызовы API, особенно если последний зависит от результата первого

2 голосов
/ 12 апреля 2019

Я нахожусь в такой ситуации, когда я записываю свои вызовы API во вложенном формате.Учитывая требование, что вызовы API, сделанные последним, зависят от результата первого, есть ли лучший способ справиться с этим?Я особенно хочу найти чистое и элегантное решение с точки зрения лучшей организации вызовов, чтобы я мог избежать вложенности

ОБНОВЛЕНИЕ:

вот код, который представляет реальную ситуацию, которую я хочу обработатьлучше:

Вызовы API представляют последовательность, в которой должны быть действия / поток приложения.Есть ли лучший способ обработки вложенных вызовов?

  dummyMethod(){
    activeModal.result.then((modalResult)=>{
      var payload = {
        id:modalResult.id,
        value:modalResult.value,
      }

      this.dataService.updateRelationship(payload)
      .subscribe(response =>{
        if(response.success){
          var payload:{
            otherId: response.someId,
            otherValue:response.someValue
          }
          this.dataService.doCleanup(payload)
          .subscribe(otherResponse => {
            if(otherResponse.success){
              var anotherPayload:{
                someOtherId: otherResponse.otherId,
                someOtherValue: otherResponse.otherValue,
              }
              this.dataService.fetchResults(anotherPayload)
              .subscribe(results => {
                // do something with results
              }, error => {
                // log error
              });
          }}, otherError => {
            // log error
          });
        }
      }, error => {
        // log error
      });
    });
  }

Ответы [ 2 ]

4 голосов
/ 12 апреля 2019

Обычно вы используете pipe и flatMap (или любой другой оператор, подходящий для вашего случая использования): 

this.http.get(url)
  .pipe(
    flatMap((data: any) => this.http.get(url + data.whatever)),
    flatMap((data: any) => /* ... */)
  )
  .subscribe((data: any) => {
    console.log(data);
  });

Для запросов, которые не зависят друг от друга, вы можете использовать zip

zip(this.http.get('foo'), this.http.get('bar'))
  .subscribe(([foo, bar]) => ...)
0 голосов
/ 12 апреля 2019

Вы можете попробовать использовать promise, async и await. Я нашел эту статью, которая описывает, что вы пытаетесь сделать: https://medium.com/@balramchavan/using-async-await-feature-in-angular-587dd56fdc77

Итак, вы пытаетесь сделать что-то подобное с вложенностью: 

getConditionalDataUsingPromise() {
    this.httpClient.get<Employee>(this.url).toPromise().then(data => {
      console.log('First Promise resolved.')
      if (data.id > 5) {
        let anotherUrl = 'http://dummy.restapiexample.com/api/v1/employee/23';
        this.httpClient.get<Employee>(anotherUrl).toPromise().then(data => {
          this.conditionalPromiseResult = data;
          console.log('Second Promise resolved.')
        });
      }
    });
  }

Вы захотите переписать это так: 

async getConditionalDataUsingAsync() {
    let data = await this.httpClient.get<Employee>(this.url).toPromise();
    if (data.id > 5) {
      let anotherUrl = 'http://dummy.restapiexample.com/api/v1/employee/23';
      this.conditionalAsyncResult = await this.httpClient.get<Employee>(anotherUrl).toPromise();
    }
    console.log('No issues, I will wait until promise is resolved..');
  }
...