angular - API 请求 GET 延迟

Question

看，我做了一个代码，接收用户的 CPF 然后发送到服务器，它检查 CPF 是否有效，如果是，然后在控制台中打印用户名，如果不是，打印“未找到”，这是代码:

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"

但是打印出来的

"Not Found"

因为函数 validar() 接收用户的信息，但是当它运行 if() 来检查用户是否存在时，registros 的数量尚未达到正在检查的变量，所以返回给我，因为用户没有存在，只有当我第二次单击按钮时才会打印名称，我该如何解决这个问题？
当值已经分配给变量时，我怎么能告诉我的函数只运行 IF ？请帮我!!

Answer 1

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

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

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

里面 subscribe的 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)
  }