Wie rufe ich eine API erneut an, wenn eine vorherige erfolgreich beendet wurde?
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
Ich verstehe, Sie haben ein serviceOne
und ein serviceTwo
. Und Sie möchten serviceTwo
mit 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 serviceOne
an übergeben serviceTwo
mü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 => {},
});
}
Verwenden aysnc
und await
Sie 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
}
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 switchMap
wird und der zweite Anruf niemals getätigt wird.