2

Possuo uma função que dispara uma requisição ajax para uma rota, veja:

var getInstituicoesSemUsuario = function(tipo)
{
    var resultado = "";

    $.ajax(
    {                       
        url: "{{path_for('instituicao.sem.responsavel')}}",
        data: "tu=" + tipo,
        type: "GET",
        async: false,                       
        success: function(resposta)
        {
            resultado = resposta;
        }
    });

    return resultado;
}

Com a opção async definida para false é possível obter o retorno da função getInstituicoesSemUsuario(), porém, o Google Chrome emite o seguinte aviso:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.

Em poucas palavras, uma chamada síncrona parece afetar a experiencia do usuário final.

No entanto, se eu remover a opção async ou defini-la para true o aviso some, mas, eu não consigo pegar o resultado da requisição.

Dúvidas

  1. Como eu posso obter o resultado de uma requisição ajax assíncrona?
  2. Por que uma requisição síncrona afeta a experiencia do usuário?
  3. Há cenários no qual eu possa utilizar requisições síncronas?

1 Resposta 1

1

Respostas:

  1. Como eu posso obter o resultado de uma requisição ajax assíncrona?

Tens de usar callbacks, promises ou async/await. Podes ler mais aqui sobre alternativas de encadeamento de funções assíncronas.

  1. Por que uma requisição síncrona afeta a experiencia do usuário?

Imagina que o servidor que estás a contactar demora a responder, ou não responde de todo... aí o browser fica bloqueado à espera eternamente e tens de recarregar a página ou fechar o browser para poder usa-lo de novo. No caso de um carrinho de compras por exemplo isso pode ser muito mau para o utilizador que perde o que estava gravado.

  1. Há cenários no qual eu possa utilizar requisições síncronas?

Não. Hoje em dia isso está obsoleto == proibido.


Sobre o problema concreto na pergunta, é parecido com este outro, e podes resolver como as alternativas que indiquei em 1.. Um exemplo com deferred (a promise do jQuery) poderia ser assim:

var getInstituicoesSemUsuario = function(tipo) {
  return $.ajax({
    url: "{{path_for('instituicao.sem.responsavel')}}",
    data: "tu=" + tipo,
    type: "GET"
  });
}

// e depois quando precisares:
getInstituicoesSemUsuario('foo').done(function(resultado) {
  console.log(resultado);
});
1
  • 1
    @AndersonCarlosWoss obrigado! Estava a inglezar demais :) Por curiosidade fui à procura e encontrei isto.
    – Sergio
    Commented 12/08/2017 às 16:20

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 .