1

Quando rodo a seguinte função sempre obtenho 0 como resultado.
Gostaria de saber o porquê disso e se estou fazendo algo errado. A função cadastro_socios_xlsx recebe um objeto e cadastra cada instância do mesmo no banco de dados, preciso da variável teste (que deve ser incrementada em uma unidade a cada instância devidamente cadastrada no banco) para uma verificação futura, mas a variável 'teste' só tem seu valor correto quando coloco o console.log dentro do request.onreadystatechange. Já tentei usar AJAX, porém acontece o mesmo...

$(document).ready(function(){
    function cadastro_socios_xlsx(tabela){
        var teste = 0;
        for(linha of tabela){
            if(formata_cpf_cnpj(linha['CPF/CNPJ']) && valida_cpf_cnpj(linha['CPF/CNPJ'])){
                if(linha['CPF/CNPJ'] == 14){
                    var pessoa = "fisica";
                }else var pessoa = "juridica";
                if (typeof linha['EMAIL'] == 'undefined') {
                    var email = "";
                }else var email = linha['EMAIL'];
                if (typeof linha['COMPLEMENTO'] == 'undefined') {
                    var complemento = "";
                }else var complemento = linha['COMPLEMENTO'];
                var data_nasc = "";
                var telefone = linha['TELEFONE'].replace(" ", "");


                var dados = {
                    "socio_nome": linha['NOME/RAZÃO SOCIAL'],
                    "pessoa": pessoa,
                    "email": email,
                    "telefone": telefone,
                    "cpf_cnpj": linha['CPF/CNPJ'],
                    "rua": linha['ENDEREÇO'],
                    "numero": linha['NÚMERO'],
                    "complemento": complemento,
                    "bairro": linha['BAIRRO'],
                    "estado": linha['UF'],
                    "cidade": linha['CIDADE'],
                    "data_nasc": data_nasc,
                    "cep":linha['CEP']
                };
                var dados = JSON.stringify(dados);
                var request = new XMLHttpRequest();

                request.open('post', './cadastro_socio.php');
                request.send(dados);
                request.onreadystatechange = function() {
                    if(this.readyState == 4 && this.status == 200){
                        var r = JSON.parse(this.response);
                        if(r){
                            teste++;
                            //console.log(teste); quando coloco o console.log aqui ele mostra os valores incrementando
                        }
                    }
                }
                 //console.log(teste); quando coloco o console.log aqui ele sempre mostra o valor inicial da variável teste (0)
            }

        }
        return teste; //sempre retorna 0
    }

2
  • Matheus, isso está acontecendo, pois uma requisição em javascript é assíncrona, então sua função está retornando antes mesmo da requisição ter sido finalizada, dê uma lida: developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/… e developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/… Commented 9/05/2020 às 1:26
  • Obrigado, utilizei o AJAX de forma síncrona e funcionou. Porém recebo no console uma mensagem dizendo: [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check link, realmente usar de forma síncrona acaba afetando um pouco o desempenho por poder fazer apenas uma requisição por vez, mas por agora vai servir. Commented 9/05/2020 às 1:44

2 Respostas 2

2

Quando inicializa XMLHttpRequest através do método open() com apenas dois parâmetros você está informando ao sistema que está inicializando uma requisição assíncrona.

Em uma solicitação assíncrona o fluxo de execução da função não fica bloqueado quando envia uma requisição para o servidor com send(), o código do callback só será executado quando o servidor der uma resposta ou informar timeout.

Já em uma solicitação síncrona o fluxo de execução da função se interrompe e só é retomado após o servidor fornecer uma resposta, e o fluxo de execução passar pelo callback. A solicitação síncrona não aceita timeout.

//Função de testes de requisição assíncrona HTTP simplificada
//O objetivo não é medir suceso ou não de uma requisição portanto:
//NÃO SERVE DE MODELO PARA CHAMADAS XMLHttpRequest
function testeAsync() {
  let teste = 0;
  let request = new XMLHttpRequest();
  request.timeout = 5000; //timeout 5s

  //Faz uma requisição assíncrona a uma API de testes 
  request.open('post', 'https://jsonplaceholder.typicode.com/posts');
  request.setRequestHeader('Content-type', 'application/json; charset=UTF-8');
  request.onreadystatechange = function(r) {
    if (this.readyState != 4 && this.status != 200) return;
    teste++;
    console.log(`Teste assíncrono dentro do callback : teste = ${teste}`);
  }
  //É uma requição assíncrona o que signific que o fluxo de execução NÃO será retido aqui 
  request.send({
    title: 'foo',
    body: 'bar',
    userId: 1
  });
  //Provavelmente esse código será executado primeiro que o equivalente dentro do callback, 
  //O que significa que teste++; ainda não foi executado provavelmente retornando teste = 0, mas não é uma certeza
  console.log(`Teste assíncrono fora do callback: teste = ${teste}`);
}

//Função de testes de requisição síncrona HTTP simplificada
//O objetivo não é medir suceso ou não de uma requisição portanto:
//NÃO SERVE DE MODELO PARA CHAMADAS XMLHttpRequest
function testeSync() {
  let teste = 0;
  let request = new XMLHttpRequest();

  //Faz uma requisição síncrona a uma API de testes 
  request.open('post', 'https://jsonplaceholder.typicode.com/posts', false);
  request.setRequestHeader('Content-type', 'application/json; charset=UTF-8');
  request.onreadystatechange = function(r) {
    if (this.readyState != 4 && this.status != 200) return;
    teste++;
    console.log(`Teste síncrono dentro do callback : teste = ${teste}`);
  }
  //É uma requição síncrona o que signific que o fluxo de execução SERÁ retido aqui. 
  request.send({
    title: 'foo',
    body: 'bar',
    userId: 1
  });
  //Esse código NÃO será executado primeiro que o equivalente dentro do callback, 
  //O que significa que teste++; com certeza foi executado retornando teste = 1
  console.log(`Teste síncrono fora do callback : teste = ${teste}`);
}


testeAsync();

testeSync();

0

Pelo que vi pode ser um problema de escopo de variável tenta retornar a variável "teste" dentro da função "onreadystatechange",em vez de fora dela.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .