0

Criei uma variavel global em JavaScript e estou fazendo uma requisição AJAX, dentro da função success do ajax, eu atribuo o retorno para a variavel global, porem ao sair do AJAX, a variavel fica indefinida.

var mesasPrint;

$.ajax({
    url: BASE_URL + 'mesas/get_mesas_ajax',
    success: function(result){
        mesasPrint = result;
        console.log(mesasPrint);
    }

});

console.log(mesasPrint);

O resultado é esse

inserir a descrição da imagem aqui

A requisição ajax está funcionando, quando eu dou um console.log dentro da função success ele retorna o JSON, porem quando atribuo a variavel mesasPrint e tento usar fora da função, está como indefinida

3
  • Há um equívoco na sua interpretação. A variável global não fica indefinida ao sair do AJAX, ela está aparecendo como undefined no seu console porque você faz o log dela antes do AJAX terminar a requisição, e portanto, antes de atribuir um valor à mesaPrint.
    – Andre
    Commented 23/11/2019 às 22:01
  • O undefined está na linha 32, logo após a linha 27. Não sei porque no log aparece primeiro, mas se eu deixar apenas o console.log apos o ajax, continua undefined, porem o console log apenas dentro da requisição ajax, apresenta os dados Commented 23/11/2019 às 22:12
  • você precisa entender que a requisição ajax é assincrona, ou seja ela executa em segundo plano liberando o script a seguir e apenas depois que ela termina, ela executa a função success, ou seja, por mais rapido que a requisição seja concluida, a linha 27 sempre vai ser executada depois da linha 32. Coloque tudo o que você precisa fazer com a variavel mesasPrint dentro da função success do ajax. Commented 26/11/2019 às 1:12

1 Resposta 1

1

Não vou entrar a fundo, mas o que está acontecendo aqui é um asincronismo. Repare que no seu AJAX você declara uma função de callback na propriedade success. Por que você precisa declarar uma função ao invés de simplesmente continuar escrevendo o seu código normalmente? Porque essa função não é executada imediatamente, ela é um bloco de código que será executado quando seu AJAX terminar.

O seu código é executado nessa orderm:

// 1 - variável mesasPrint é inicializada
var mesasPrint;

// 2 - função AJAX é invocada
$.ajax({
    url: BASE_URL + 'mesas/get_mesas_ajax',
    success: function(result){
        // 4 - função de callback é executada eventualmente quando o AJAX finalizar
        mesasPrint = result;
        console.log(mesasPrint);
    }

});

// 3 - mesasPrint é printado no console
console.log(mesasPrint);

Isso ocorre para evitar que outras partes do código sejam bloqueados enquanto o código espera pela execução de uma operação de I/O demorada. O JavaScript não espera pelo AJAX, ou outras operações de I/O terminarem para continuar executando a próxima linha do código. Se o seu código precisa da resposta do AJAX para continuar, declare essa parte do código dentro da função de callback.

Você pode se aprofundar em outras maneiras de tratar o assincronismo com promises e/ou await

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 .