Problem with Http Request Angular

Question

Iae galera!

Look, I have a code here that’s gets the user data when he types in his CPF, I recently started using Async functions. the idea of Async would not only be to perform the function from the bottom when the top one is solved? Something like:

async teste() {
   await const dados = this.http
        .get(url)
        .toPromise()
        .then(res => {
            this.usuarioDados = res
         })
   console.log(this.usuarioDados)
}

Then console.log will only run when the request is resolved, right or wrong?

Finally...

The purpose of my code has already been explained, it is like this:

async receberUsuario(usuario) {
    await this.http
        .get<UsuarioDados>(environment.url + environment.token + '&Metodo=alunoCheckCPF&AlunoCPF=' + usuario.cpf)
        .toPromise()
        .then(response => {
            usuario.numero_registros = response.ALUNO_ACADEMIA.Registros;

            if (usuario.numero_registros === 1) {
                const dados = this.http
                    .get<UsuarioDados>(environment.url + environment.token + '&Metodo=alunoCheckCPF&AlunoCPF=' + usuario.cpf)
                    .toPromise();
                dados.then(res1 => {
                    usuario.nome = res1.ALUNO_ACADEMIA.AlunoDados[0].nome_aluno;
                    usuario.id = res1.ALUNO_ACADEMIA.AlunoDados[0].id_aluno_main;
                    usuario.idNaAcademia = res1.ALUNO_ACADEMIA.AlunoDados[0].id_aluno_academia;
                    usuario.senha = res1.ALUNO_ACADEMIA.AlunoDados[0].aluno_senha;
                    usuario.nomeAcademia = res1.ALUNO_ACADEMIA.AlunoDados[0].academia_nome;
                    usuario.idAcademia = res1.ALUNO_ACADEMIA.AlunoDados[0].id_academia;

                    console.log(usuario.nome);
                });

                const contato = this.http
                    .get<UsuarioContatos>(
                    environment.url + environment.token + '&Metodo=alunoLoginContatos&AlunoIDMain=' + usuario.id + '&CttoValidacao=true'
                    )
                    .toPromise();
                contato.then(res2 => {
                    usuario.email = res2.ALUNO_CONTATOS.Contatos
                        .filter((contato1) => {
                            return contato1.ID_TipoContato === '3';
                        });
                    usuario.celular = res2.ALUNO_CONTATOS.Contatos
                        .filter((contato2) => {
                            return contato2.ID_TipoContato === '4';
                        });
                });

                this.armazenarUsuario(usuario);

                this.authLoginService.senhaExiste(usuario);
          } else {
            console.log('Não encontrado');
          }
        });
    console.log(usuario.nome);
  }

What is he doing? He is making a request, taking the number of the User’s records, if it is equal to 1, makes the rest of the request, if equal to 0, give a alert('Usuário não encontrado'), the rest of the request is in 2 parts, data and contact, so it first takes the Data, as "name, id, password, name of the gym and etc" and a console.log for debug only, then makes another request to receive the contacts. However JSON is in the following format:

{
    "ALUNO_CONTATOS": {
        "Registros": 2,
        "Contatos": [
            {
                "ID_TipoContato": "3",
                "TipoDescricao": "Telefone celular",
                "Contato": "31993004686"
            },
            {
                "ID_TipoContato": "4",
                "TipoDescricao": "E-mail",
                "Contato": "[email protected]"
            }
        ],
        "ErroMsg": false
    }
}

Note that the contact is in the middle of an object array, I need to separate the email from the mobile, so I do not put by index, something like:

usuario.celular = res2.ALUNO_CONTATOS.Contatos[0]
usuario.email = res2.ALUNO_CONTATOS.Contatos[1]

I thought I’d better use the filter(), so I did:

contato.then(res2 => {
                    usuario.email = res2.ALUNO_CONTATOS.Contatos
                        .filter((contato1) => {
                            return contato1.ID_TipoContato === '3';
                        });
                    usuario.celular = res2.ALUNO_CONTATOS.Contatos
                        .filter((contato2) => {
                            return contato2.ID_TipoContato === '4';
                        });
                });

And at the end of everything I put a console.log() on the.name user, which should only run when all the request is resolved, so I put Await up there, but I’m getting the following errors:

• The console.log at the end is running first and is returning Undefined
• Error with my filter: "Typeerror: res2.ALUNO_CONTATOS.Contacts.filter is not a Function Typeerror: res2.ALUNO_CONTATOS.Contactos.filter is not a Function"

How can I solve these problems? If the question got confused please inform me.

Answer 1

Remove the .then of Promise if you want to wait for the request to be completed before your code continues.

Stay like this:

   async teste() {
       this.usuarioDados = await this.http
            .get(url)
            .toPromise();

       console.log(this.usuarioDados)
    }

I suggest taking a look at this link, suggested by Costamilam in the comments: How can I use javascript async/await?