wait for result of first function before handle second function - node.js

Question

In my html front, the user can fill in the detail product information. When click on the button to save the data, the onSubmit function will be started. Here is my example:
onSubmit() {
this.projectService.createProject().subscribe({
next: data => {
console.log(data);
},
error: err => {
console.log(err);
}
});
this.projectService.createProjectDetails().subscribe({
next: data => {
console.log(data);
},
error: err => {
console.log(err);
}
})
}
in the projectService:
createProject(): Observable<any> {
return this.http.post(PROJECT_URL + "createProject", httpOptions);
}
createProjectDetails(): Observable<any> {
return this.http.post(PROJECT_URL + "createProjectDetails", httpOptions);
}
I dont show all the code but my question is, when there is an error in the createProject, the second function still will run while I dont want this. Can I put the createProjectDetails in the next of the createProject?

Answer 1

Since you seem to work on an Angular-app, you could use switchMap (from RxJs) in order to chain both request. In this case the second function will not run if the first one results in an error:
onSubmit() {
this.projectService.createProject().pipe(
switchMap(() => this.projectService.createProjectDetails())
).subscribe({
next: data => {
console.log(data);
},
error: err => {
console.log(err);
}
});
}
Alternatively you could use the catchError() operator instead of the error callback.
onSubmit() {
this.projectService.createProject().pipe(
switchMap(() => this.projectService.createProjectDetails()),
catchError((err) => {
console.log(err);
return throwError(err);
})
).subscribe((data) => {
console.log(data);
});
}

Answer 2

please create a new function and fire that function when the response is success.
onSubmit() {
this.projectService.createProject().subscribe({
next: data => {
console.log(data);
this.createProjectDetails(); // fire function only here
},
error: err => {
console.log(err);
}
});
}
createProjectDetails(){
this.projectService.createProjectDetails().subscribe({
next: data => {
console.log(data);
},
error: err => {
console.log(err);
}
})
}
In the above example, createProjectDetails() will get fired once createProject() is complete. I hope this solves your question, let me know if there are any issues.

Answer 3

Try this using rxjs
import { mergeMap } from 'rxjs/operators'
When we need data from the first API request to make requests to the second API.
onSubmit() {
this.projectService.createProject().pipe(
map(project = {
console.log(project);
return project;
}),
mergeMap( project => this.projectService.createProjectDetails(project.id))
).subscribe( projDetails = {
console.log(projDetails)
});
}
subscribe is a common way to handle requests in Angular, but there are more effective methods. We will first solve our problem using subscribe and then improve on it using mergeMap.