Angular 4 wait till http.get execute to continue

Question

I'm creating a new register form an app with Ionic and using ASP.Net(C#) as my API.

I want to check if user exists when the input blur event is activate.

The problem is that my code isn't waiting till the server returns a value to continue. What am I doing wrong? Is there a way to do that?

THIS IS MY API CODE:

    [HttpGet]
    public JsonResult verifyEmail(string email)
    {
        var result = Domain.Repository.UserController.Find(email:email);
        if (result != null)
        {
            return Json(new { erro = true, message = "Email already registered!" }, JsonRequestBehavior.AllowGet);
        }
        else
        {
            return Json(new { erro=false,message = "Email is valid!" },JsonRequestBehavior.AllowGet);
        }
    }

I CREATED A PROVIDER TO MAKE THE HTTP REQUEST(authProvider):

   getData(data,func)
    {
        return  new Promise( (resolve,reject)=>{
          this.http.get(apiUrl+func, {params:data})  
          .subscribe(
           res=>{

            resolve(res.json());
          },
          async (err)=>{
            reject(err);

          });
        });
        }

AND HERE IS MY register.ts code:

  validate()
  {
     let validEmail;
     validEmail= this.checkEmail();// I WANT THAT the "validEmail" receives returned value before continue.

     return true;
  }

AND THE LAST THING IS MY FUNCTION THAT WILL CALL THE PROVIDER:

  checkEmail()
  {
    return this.authService.getData({email:this.model.email},"Account/verifyEmail").then((result)=>{
      let response = <any>{};
      response=result;
      if(response.erro)
      {
        return response.message
      }else
      {
        return true
      }

    },(err)=>{
      this.toastService.presentToast("ERROR:"+err,"bottom",undefined,"toast-error");
    });
  }

Thanks in advance..

@LazarLjubenović someone who writes C# might like the usage of async/await. This is why i asked — misha130
– misha130, Commented Jan 12, 2018 at 11:27

misha130 · Accepted Answer · 2020-03-31 15:43:24Z

6

 getData(data,func)
    {
          this.http.get(apiUrl+func, {params:data})  
          .map(res => {
            return res.json();
          })
         .toPromise();
    }

or with async/await

 async getData(data,func)
    {
     let result = await this.http.get(apiUrl+func, {params:data})  
         .toPromise();
       return result.json();
    }

Now for the validate function:

  async validate()
  {
     let validEmail;
     await this.checkEmail();
     return true;
  }

Point is you cant jump from a sync function to an async or vice versa. Validate needs to return a promise/observable because it is executes asynchronous functions.

edited Mar 31, 2020 at 15:43

answered Jan 12, 2018 at 11:26

misha130

5,7862 gold badges31 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Suraj Rao Over a year ago

actually async await are available in js. MDN Docs. It is in ES2017 specs

Vinicius Andrade Over a year ago

The same thing, the function validate() continues returning true, before i got a result from function checkEmail()

Lazar Ljubenović Over a year ago

Why would you convert it to a promise? That's going a step back from Observables.

misha130 Over a year ago

@LazarLjubenović he likes promises. I didn't want to change it too much.

Vinicius Andrade Over a year ago

@misha130 thanks for the help, altought i had to transform my register function as async too. But now it's working, thanks a lot

|

Collectives™ on Stack Overflow

Angular 4 wait till http.get execute to continue

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related