Ionic 4. Can't use an alert, because it's not in an async function

Ionic Framework
1

I have a login function with different alerts and loaders.
I now upgraded to ionic 4 from ionic 3 and the alert and loader functions
don’t work like before. I tried to update my function, but I’m stuck at one point.

My function is:

  async signIn() {

    //// check to confirm the username and password fields are filled
 
    if (this.username.value == "") {
 
     let alert = await this.alertCtrl.create({
 
      header: "ATTENTION",
 
      subHeader: "Username field is empty",
 
      buttons: ['OK']
 
     });
 
     return await alert.present();
 
    } else
 
    if (this.password.value == "") {
 
     let alert = await this.alertCtrl.create({
 
      header: "ATTENTION",
 
      subHeader: "Password field is empty",
 
      buttons: ['OK']
 
     });
 
     return await alert.present();
 
    } else
 
    {
 
     var headers = new Headers();
 
     headers.append("Accept", 'application/json');
 
     headers.append('Content-Type', 'application/json');
 
     let options = new RequestOptions({
      headers: headers
     });
 
     let data = {
 
      username: this.username.value,
 
      password: this.password.value
 
     };
 
     let loader = await this.loading.create({
 
      message: 'Processing please wait',
 
     });
 
     return await loader.present().then(() => {
      

//alerts stop working here, because they are not inside an async function
//without the alerts the script works

      this.http.post('localhost/login.php', data, options)
       .pipe(
        map(res => res.json()))
          
       .subscribe(res => {
 
        console.log(res)
 
        loader.dismiss()
 
        if (res == "Your Login success") {
 
         let alert = await this.alertCtrl.create({
 
          header: "CONGRATS",
 
          subHeader: (res),
 
          buttons: ['OK']
 
         });
 
         this.authService.login();
 
         return await alert.present();
 
        } else
 
        {
 
         let alert = await this.alertCtrl.create({
 
          header: "ERROR",
 
          subHeader: "Your Login Username or Password is invalid",
 
          buttons: ['OK']
 
         });
 
         return await alert.present();
 
        }
 
       });
 
     });
 
    }
 
   }

I hope someone can help me to solve this problem and help me to change my function.
Thx a lot.

2

Hi @Grouvie :wave:

Here are some suggestions regarding working with async/await:

  • Don’t do return await [promise]. Since you are inside an async function, it will return a promise anyway (all async functions wrap the value being returned in a promise).

  • I would remove all .then() promise chains to make code more legible and await them instead. For example changing return await loader.present().then(() => {...}) to just await loader.present(); and continue with the rest of the code.

  • If you need to return an http observable in an async function and await it, you can convert it to a promise by adding .toPromise() at the end instead of subscribing to it. Like:

const res = await this.http.post('localhost/login.php', data, options)
.pipe(map(res => res.json()))
.toPromise();

console.log(res);
...

Best,
Rodrigo

3

Perfect working solution.
Thanks a lot.

4

Awesome! Glad to help :blush: