Wie rufe ich eine API erneut an, wenn eine vorherige erfolgreich beendet wurde?

Nov 25 2020

Ich bin neu in Angular / RXJs und ich habe das folgende Szenario, in dem ich das brauche, nachdem ein Aufruf einer API erfolgreich aufgelöst wurde, um einen neuen Anruf zu tätigen. Im Kontext von Angular / RXJs weiß ich nicht, wie ich es machen soll es

handler(): void {
  this.serviceNAme
    .createDirectory(this.path)
    .pipe(
      finalize(() => {
        this.someProperty = false;
      })
    )
    .subscribe(
      (data) => console.log(data),
      (error) => console.error(error.message)
    );
}

Was ist der richtige Weg, um eine API erneut anzurufen, wenn eine vorherige erfolgreich war?

Antworten

2 adrisons Nov 26 2020 at 15:07

Ich verstehe, Sie haben ein serviceOneund ein serviceTwo. Und Sie möchten serviceTwomit den abgerufenen Daten von anrufen serviceOne.

Mit rxjs switchMap können Sie eine beobachtbare in eine andere leiten .

    handler(): void {
        this.serviceOne
            .createDirectory(this.path)
            .pipe(
                switchMap(serviceOneResult => {
                    // transform data as you wish
                    return this.serviceTwo.methodCall(serviceOneResult);
                })
            )
            .subscribe({
                next: serviceTwoResult => {
                    // here we have the data returned by serviceTwo
                },
                error: err => {},
            });
    }

Wenn Sie die Daten nicht von serviceOnean übergeben serviceTwomüssen, sondern beide zusammen vervollständigt werden müssen, können Sie rxjs forkJoin verwenden .

    handler(): void {
        forkJoin([
            this.serviceOne.createDirectory(this.path), 
            this.serviceTwo.methodCall()
        ])
        .subscribe({
            next: ([serviceOneResult, serviceTwoResult]) => {
                // here we have data returned by both services
            },
            error: err => {},
        });
    }
1 DigitalDrifter Nov 26 2020 at 04:21

Verwenden aysncund awaitSie können tun:

async handler(): void {
  await this.serviceNAme
    .createDirectory(this.path)
    .pipe(
      finalize(() => {
        this.someProperty = false;
      })
    )
    .subscribe(
      (data) => console.log(data),
      (error) => console.error(error.message)
    );

   // Do second api call
}
1 MrkSef Nov 26 2020 at 05:00

Es gibt einige, die dies sagen:

Szenario 1

Ihre beiden Service-API-Anrufe sind unabhängig voneinander. Sie möchten nur, dass einer geht und dann der nächste

 const serviceCall1 = this.serviceName.createDirectory(this.path);
 const serviceCall2 = this.serviceName.createDirectory(this.otherPath);

 concat(serviceCall1 , serviceCall2).subscribe({
   next: console.log,
   error: err => console.error(err.message),
   complete: () => console.log("service call 1&2 complete")
 });

Szenario 2

Ihre beiden Anrufe sind voneinander abhängig, sodass Sie das Ergebnis des ersten benötigen, bevor Sie den zweiten starten können

 this.serviceName.getDirectoryRoot().pipe(
   switchMap(root => this.serviceName.createDirectoryInRoot(root, this.path))
 ).subscribe({
   next: console.log,
   error: err => console.error(err.message),
   complete: () => console.log("service call 1 used to create service call 2, which is complete")
 });

Sie möchten Szenario 2 , da auf diese Weise ein Fehler beim ersten Anruf bedeutet, dass kein Ergebnis an das gesendet switchMapwird und der zweite Anruf niemals getätigt wird.