Home > OS >  Spring and Angular: How to make two http calls one after another with a condition
Spring and Angular: How to make two http calls one after another with a condition

Time:05-23

I have an Angular interface which handles a file upload, after a submit button it persist this file in MySQL database. I want to make another call inside this submit method but the second http call needs the id of that entity persisted(file) and I don't know how to retrieve that specific id from that file uploaded.

this is my submit method:

onSubmit() {

        const statementFile = new StatementFile();

// *******
// here are some business logic
// *******


// this will send POST request and save it to MySQL.
        this.statementFileService.postStatementFile(statementFile).subscribe(
            {
                next : (response) => {
                    alert('You have been submitted your statement file, check MySQL');
                },
                error: (err) => {
                    alert(`there was a problem: ${err.message}` );
                }
            }
        );


// this is the second http request I want to call but it needs particularly the id of that statementFile uploaded.
this.activitiWorkflowService.createPreccess(statementFile.statementFileId).pipe(takeUntil(this._unsubscribeAll), debounceTime(3000)).subscribe(
            (data: any) => data
        );

    }

this is my StatementFile class:

export class StatementFile{

    statementFileId: number;
    dateReception: Date;
    label: string;
}

CodePudding user response:

You can use switchMap operator to chaining requests. statementFile.statementFileId or response.statementFileId or something else from postStatementFile request you will use to call next request.

 this.statementFileService.postStatementFile(statementFile)
      .pipe(
        switchMap(response => this.activitiWorkflowService.createPreccess(statementFile.statementFileId).pipe(takeUntil(this._unsubscribeAll)))
      )
      .subscribe({
          next : (data: any) => data,
          error: (err) => {
             alert(`there was a problem: ${err.message}` );
          }
        }
      );
  • Related