How do I make code wait for previous lines to finish-CodePudding

I have function that creates the client, but before that it should check if there are any similar names in database. If there are, it returns array string with those names, if not it returns empty array. My code so far:

let similarNames:string[] = [];

    this.clientsService.getSimilarNames(clientFormData.clientName, 0).subscribe(res => {
      similarNames = res;
      console.log("Length: ", similarNames.length)
      console.log(similarNames) <-- console.log shows that everything is fine there
      if(similarNames.length > 0){
        this.confirmationService.confirm({
          message: 'There are already similar names:'   similarNames,
          header: 'Similar names',
          icon: 'fa fa-exclamation-triangle',
          acceptLabel: 'Yes',
          rejectLabel: 'No',
          accept: () => {},
          reject: () => {return;}
      })
    }
      this.clientsService.createClient(clientFormData).subscribe(resp => {
        this.isLoading = false;
        this.onCreateClientSuccess();
      }, error => {
        this.isLoading = false;
        this.messageHelperService.showErrorMessage(error, this.messages.CreateError);
      });
    })

My problem is that this.clientService.createClient doesn't wait for code in if statement to finish. Right now it creates client and then shows similar names and ask to create. I want to work it like that: If there is any similar name pop up should appear with list of those names and if accepted it should just proceed to creating a client if rejected it should exit the function and don't create client.

CodePudding user response：

Hi and welcome to the StackOverflow community first of all!

Actually, I would proceed with RxJS chaining them with pipe and exhaustMap.

this.clientsService.getSimilarNames(clientFormData.clientName, 0).pipe(
  exhaustMap(res => {
        similarNames = res;
        console.log("Length: ", similarNames.length)
        console.log(similarNames) <-- console.log shows that everything is fine there
        if( similarNames.length > 0 ){
          return this.confirmationService.confirm({
          message: 'There are already similar names:'   similarNames,
          header: 'Similar names',
          icon: 'fa fa-exclamation-triangle',
          acceptLabel: 'Yes',
          rejectLabel: 'No',
          accept: () => {},
          reject: () => {return;}
      })
    }
    return of();
  }),
  exhaustMap(responseFromConfirm => this.clientsService.createClient(clientFormData))
).subscribe(
       () => {
        this.isLoading = false;
        this.onCreateClientSuccess();
      }, 
      error => {
        this.isLoading = false;
        this.messageHelperService.showErrorMessage(error, this.messages.CreateError);
      });

In this way, you are chaining your async operation and emit the value of the next operator only when completed. Of course, the creation will be triggered even if the check on the similiarNames fails.

For more information about, see exhaustMap

CodePudding user response：

You could put the creatClient code in an else and duplicate it in the use the accept callback

Of course, then you'll duplicate code for no good reason

So, it's better to create a function for the "common" code and do something like

note the function is an arrow function, to preserve this

let similarNames: string[] = [];

this.clientsService.getSimilarNames(clientFormData.clientName, 0).subscribe(res => {
    similarNames = res;
    console.log("Length: ", similarNames.length)
    console.log(similarNames)
    const fn = () => {
        this.clientsService.createClient(clientFormData).subscribe(resp => {
            this.isLoading = false;
            this.onCreateClientSuccess();
        }, error => {
            this.isLoading = false;
            this.messageHelperService.showErrorMessage(error, this.messages.CreateError);
        });
    };
    if (similarNames.length > 0) {
        this.confirmationService.confirm({
            message: 'There are already similar names:'   similarNames,
            header: 'Similar names',
            icon: 'fa fa-exclamation-triangle',
            acceptLabel: 'Yes',
            rejectLabel: 'No',
            accept: fn,
            reject: () => {}
        });
    } else {
        fn()
    }
})

Another alternative is to use async/await and a new Promise - seems OTT for the situation, but, the code does look clean (IMHO)

let similarNames: string[] = [];

this.clientsService.getSimilarNames(clientFormData.clientName, 0).subscribe(async (res) => {
    similarNames = res;
    
    try {
        if (similarNames.length > 0) {
            await new Promise((resolve, reject) => {
                this.confirmationService.confirm({
                    message: 'There are already similar names:'   similarNames,
                    header: 'Similar names',
                    icon: 'fa fa-exclamation-triangle',
                    acceptLabel: 'Yes',
                    rejectLabel: 'No',
                    accept: resolve,
                    reject: reject // will result a thrown error
                });
            });
        }
        this.clientsService.createClient(clientFormData).subscribe(resp => {
            this.isLoading = false;
            this.onCreateClientSuccess();
        }, error => {
            this.isLoading = false;
            this.messageHelperService.showErrorMessage(error, this.messages.CreateError);
        });
    } catch {
    }
})