API请求延迟

Question

听着，我编写了一个代码，接收用户的CPF，然后将其发送到服务器，它检查CPF是否有效，如果是，则在控制台中打印用户名，如果不是，则打印"Not“，这是代码：

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
      });
  }
}

但我对反应的延迟有问题。我输入了一个有效的CPF，它应该打印在控制台中：

"Aline Faria Santos“

但印刷

“找不到”

因为函数validar()接收到用户的信息，但是当它运行if()来检查用户是否存在时，尚未到达要检查的变量的寄存器数，所以当用户不存在时返回给我，只有当我第二次单击名称打印按钮时，我才能修复这个问题？

当变量的值已经被赋值时，如何才能对我的函数运行IF呢？请救救我！

Answer 1

一个简单的解决方案是放置以下内容，

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

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

subscribe of receberAluno(cpf)方法。

因为您调用了validar(cpf)，这实际上再次调用了receberAluno(cpf)。因此，最好是直接调用receberAluno(cpf)，只在从API接收到数据时才检查它们。如下所示：

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

这里直接调用receberAluno(cpf)而不是调用validar(cpf)

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