API Request GET Delay

Question

Look, i made a code that receives the user's CPF then send's to the server, it checks if the CPF is valid, if it is, then print in the console the user's name, if it isn't, print "Not Found", this is the Code:

cpf.component.html

<form class="ion-padding-horizontal">

  <ion-list>

    <ion-item>
      <ion-label position="stacked" color="primary">Insira seu CPF</ion-label>
      <ion-input name="cpf" type="text" #cpf></ion-input>
    </ion-item>

    <ion-row class="ion-padding-top">
      <ion-col>
        <ion-button type="button" expand="block" (click)="validarCPF(cpf.value)">
          Login
        </ion-button>
      </ion-col>
    </ion-row>

  </ion-list>

</form>

cpf.component.ts

import { ValidateService } from '../validate.service'

export class CpfComponent implements OnInit {

  constructor(private _validateService: ValidateService) {}

  validarCPF(cpf) {
    this._validateService.validar(cpf)
  }
}

validate.service.ts

import { environment } from '../../../environments/environment'

interface respostaAluno {
  ALUNO_ACADEMIA: any;
}

export class ValidateService {

  constructor(private http: HttpClient) { }

  alunoInfo: any = {
    registros: "",
    idAcademia: "",
    nomeAcademia: "",
    idAluno: "",
    idAlunoAcademia: "",
    nomeAluno: "",
    alunoSenha: ""
  };

  validar(cpf) {

    this.receberAluno(cpf)

    if(this.alunoInfo.registros > 0) {
      console.log(this.alunoInfo.nomeAluno)

    } else {
      console.log("Not Found")
    }
  }

  receberAluno(cpf) {
    this.http
      .get<respostaAluno>( environment.url + environment.token + "&Metodo=alunoCheckCPF&AlunoCPF=" + cpf)
      .subscribe(response => {
        this.alunoInfo.registros = response.ALUNO_ACADEMIA.Registros
        this.alunoInfo.idAcademia = response.ALUNO_ACADEMIA.AlunoDados[0].id_academia
        this.alunoInfo.nomeAcademia = response.ALUNO_ACADEMIA.AlunoDados[0].academia_nome
        this.alunoInfo.idAluno = response.ALUNO_ACADEMIA.AlunoDados[0].id_aluno_main
        this.alunoInfo.idAlunoAcademia = response.ALUNO_ACADEMIA.AlunoDados[0].id_aluno_academia
        this.alunoInfo.nomeAluno = response.ALUNO_ACADEMIA.AlunoDados[0].nome_aluno
      });
  }
}

But i'm having a problem with the delay of the response. I entered a valid CPF, it was suppose to print in the console:

"Aline Faria Santos"

But printed

"Not Found"

Because the function validar() receives the user's info, but when it runs the if() to check if the user exists, the number of registros not yet reached the variable that is being checked, so returns to me as the user don't exists, only when i click the button a second time the name prints, how can i fix this?
How can i say to my function to only run the IF when the values have already been assigned to the variables?? Please help me!!

Exact duplicate: [Requisition Delay](https://stackoverflow.com/questions/59469145/requisition-delay) — R. Richards, Dec 24 '19 at 17:31

score 2 · Accepted Answer · answered Dec 24 '19 at 19:09

A simple solution would be to put the following,

if(this.alunoInfo.registros > 0) {
  console.log(this.alunoInfo.nomeAluno)

} else {
  console.log("Not Found")
}

inside subscribe of receberAluno(cpf) method.

Since you call validar(cpf) which indeed calls receberAluno(cpf) again. So it would be better to directly call receberAluno(cpf) and check data only when they are received from API. Like shown below:

receberAluno(cpf) {
this.http
  .get<respostaAluno>( environment.url + environment.token + "&Metodo=alunoCheckCPF&AlunoCPF=" + cpf)
  .subscribe(response => {
    this.alunoInfo.registros = response.ALUNO_ACADEMIA.Registros
    this.alunoInfo.idAcademia = response.ALUNO_ACADEMIA.AlunoDados[0].id_academia
    this.alunoInfo.nomeAcademia = response.ALUNO_ACADEMIA.AlunoDados[0].academia_nome
    this.alunoInfo.idAluno = response.ALUNO_ACADEMIA.AlunoDados[0].id_aluno_main
    this.alunoInfo.idAlunoAcademia = response.ALUNO_ACADEMIA.AlunoDados[0].id_aluno_academia
    this.alunoInfo.nomeAluno = response.ALUNO_ACADEMIA.AlunoDados[0].nome_aluno


    if(this.alunoInfo.registros > 0) {
      console.log(this.alunoInfo.nomeAluno)
    } 
    else 
    {
      console.log("Not Found")
    }
  });
}

cpf.component.ts

Here directly call receberAluno(cpf) instead of calling validar(cpf)

  validarCPF(cpf) {
    this._validateService.receberAluno(cpf)
  }

@Ban Great! glad to help. – Himanshu Singh Dec 26 '19 at 18:40 — Himanshu Singh, Dec 26 '19 at 18:40

API Request GET Delay

1 Answers1