¿Cómo hago una nueva llamada a una API cuando una anterior finalizó correctamente?

Nov 25 2020

Soy nuevo en angular y rxjs, y tengo el siguiente escenario, en el que necesito que después de que una llamada a una api se resuelva con éxito para hacer una nueva llamada, en el contexto de angular / rxjs no sé cómo hacerlo eso

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

¿Cuál es la forma correcta de realizar una nueva llamada a una API cuando una anterior fue exitosa?

Respuestas

2 adrisons Nov 26 2020 at 15:07

Entiendo que tienes una serviceOney una serviceTwo. Y desea llamar serviceTwoutilizando los datos recuperados de serviceOne.

Usando rxjs switchMap puede canalizar un observable a otro.

    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 => {},
            });
    }

Si no necesita pasar los datos de serviceOnea serviceTwopero necesita que ambos se completen juntos, puede usar rxjs forkJoin .

    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

Usando aysncy awaitpuedes hacer:

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

Hay algunos consejos para hacer esto:

Escenario 1

Sus dos llamadas de API de servicio son independientes, solo desea que una y luego la siguiente

 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")
 });

Escenario n. ° 2

Sus dos llamadas dependen una de la otra, por lo que necesita el resultado de la primera antes de poder iniciar la segunda

 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")
 });

Querrá el escenario n. ° 2 , porque hecho de esta manera, un error en la primera llamada significará que no se envía ningún resultado al switchMapy la segunda llamada nunca se realiza.