O console.log do JavaScript causa um erro: “XMLHttpRequest síncrono no encadeamento principal está obsoleto…”

Fui adicionando logs ao console para verificar o status de diferentes variáveis ​​sem usar o depurador do Firefox.

No entanto, em muitos lugares em que adiciono um console.logno meu main.jsarquivo, recebo o seguinte erro em vez de minhas adoráveis ​​pequenas mensagens manuscritas para mim:

O XMLHttpRequest síncrono no encadeamento principal foi descontinuado por causa de seus efeitos prejudiciais à experiência do usuário final. Para obter mais ajuda http://xhr.spec.whatwg.org/

Quais alternativas ou invólucros console.logposso adicionar ao meu uso de código que não causará esse erro?

Estou "fazendo errado"?

Isso aconteceu comigo quando eu estava com preguiça e incluí uma tag de script como parte do conteúdo que estava sendo retornado. Assim sendo:

Conteúdo HTML parcial:

<div> 
 SOME CONTENT HERE
</div>
<script src="/scripts/script.js"></script> 

Parece, pelo menos no meu caso, que se você retornar um conteúdo HTML como esse via xhr, fará com que o jQuery faça uma chamada para obter esse script. Essa chamada acontece com um sinalizador assíncrono falso, pois pressupõe que você precisa do script para continuar carregando.

Em situações como essa, seria melhor atender a algum tipo de estrutura de ligação e apenas retornar um objeto JSON, ou dependendo do seu back-end e modelo, você poderia alterar a maneira como carrega seus scripts.

Você também pode usar o jQuerygetScript() para obter scripts relevantes. Aqui está um violino: é apenas uma cópia direta do exemplo do jQuery, mas não vejo nenhum aviso quando os scripts são carregados dessa maneira.

Exemplo

<script>
var url = "/scripts/script.js";
$.getScript(url);
</script>

http://jsfiddle.net/49tkL0qd/

A mensagem de aviso PODE SER devido a uma solicitação XMLHttpRequest no segmento principal com o sinalizador assíncrono definido como falso.

https://xhr.spec.whatwg.org/#synchronous-flag :

O XMLHttpRequest síncrono fora dos trabalhadores está sendo removido da plataforma da Web, pois tem efeitos prejudiciais para a experiência do usuário final. (Esse é um processo longo que leva muitos anos.) Os desenvolvedores não devem passar falso para o argumento assíncrono quando o ambiente global JavaScript é um ambiente de documento. Os agentes do usuário são fortemente encorajados a avisar sobre esse uso nas ferramentas do desenvolvedor e podem experimentar lançar uma exceção InvalidAccessError quando ela ocorrer.

A direção futura é permitir apenas XMLHttpRequests nos threads de trabalho. A mensagem pretende ser um aviso para esse efeito.

Eu também estava enfrentando o mesmo problema, mas foi capaz de corrigi-lo colocando async: true. Eu sei que é verdadeiro por padrão, mas funciona quando eu o escrevo explicitamente

$.ajax({
   async: true,   // this will solve the problem
   type: "POST",
   url: "/Page/Method",
   contentType: "application/json",
   data: JSON.stringify({ ParameterName: paramValue }),
});

O depurador ao vivo do Visual Studio 2015/2017 está injetando código que contém a chamada descontinuada.

Às vezes, é necessário carregar o script ajax, mas adiar o documento até que ele seja carregado.

O jQuery suporta isso com a holdReady()função

Exemplo de uso:

$.holdReady(true);                              //set hold
function releaseHold() { $.holdReady(false); }  //callback to release hold
$.getScript('script.js', releaseHold);          //load script then release hold

O carregamento real do script é assíncrono ( sem erro ), mas o efeito é síncrono se o restante do JavaScript for executado após o documento estar pronto .

Esse recurso avançado normalmente é usado por carregadores de scripts dinâmicos que desejam carregar JavaScript adicional, como plug-ins jQuery, antes de permitir que o evento ready ocorra, mesmo que o DOM esteja pronto.

Documentação:
https://api.jquery.com/jquery.holdready

ATUALIZAÇÃO 7 de janeiro de 2019

No JQMIGRATE :

jQuery.holdReady () está obsoleto

Causa: o jQuery.holdReady()método foi descontinuado devido ao seu efeito prejudicial no desempenho global da página. Este método pode impedir que todo o código da página seja inicializado por longos períodos de tempo.

Solução: reescreva a página para que não exija que todos os manipuladores prontos para jQuery sejam atrasados. Isso pode ser feito, por exemplo, carregando tarde apenas o código que requer o atraso quando é seguro executar. Devido à complexidade desse método, o jQuery Migrate não tenta preencher a funcionalidade. Se a versão subjacente do jQuery usada com o jQuery Migrate não contiver mais, jQuery.holdReady()o código falhará logo após esse aviso aparecer.

Para evitar esse aviso, não use:

async: false

em qualquer uma das suas chamadas $ .ajax (). Esse é o único recurso do XMLHttpRequest que foi descontinuado.

O padrão é

async: true

O jQuery descontinuou o XMLHTTPRequest síncrono

A resposta parcial do @Webgr realmente me ajudou a depurar esse aviso @ log do console, pena que a outra parte dessa resposta tenha trazido tantos downvotes :(

Enfim, aqui está como eu descobri qual foi a causa desse aviso no meu caso:

1. Use o Navegador Chrome> Pressione F12 para trazer o DevTools
2. Abra o menu da gaveta (no Chrome 3 pontos verticais no canto superior direito)
3. Em Console > marque a opção Log XMLHttpRequests
4. Recarregue sua página que estava causando o erro e observe o que acontece em cada solicitação de ajax no log do console.

No meu caso, outro plug-in estava carregando 2 bibliotecas .js após cada chamada ajax, que não eram absolutamente necessárias nem necessárias. Desativar o plug-in não autorizado removeu o aviso do log. A partir desse ponto, você pode tentar resolver o problema sozinho (por exemplo, limitar o carregamento dos scripts para determinadas páginas ou eventos - isso é muito específico para uma resposta aqui) ou entrar em contato com o desenvolvedor de plug-ins de terceiros para resolvê-lo.

Espero que isso ajude alguém.

Eu tenho olhado para as respostas todas impressionantes. Eu acho que ele deve fornecer o código que está lhe dando um problema. Dado o exemplo abaixo, se você tiver um script para vincular ao jquery em page.php, receberá esse aviso.

$().ready(function () {
    $.ajax({url: "page.php",
        type: 'GET',
        success: function (result) {
        $("#page").html(result);
   }});
 });

Recebo esse aviso no seguinte caso:

1) arquivo1 que contém <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script> . A página possui campos de entrada. Entro algum valor no campo de entrada e clico no botão. Jquery envia entrada para arquivo php externo.

2) arquivo php externo também contém jquery e no arquivo php externo eu também incluí <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script> . Porque se isso eu recebi o aviso.

Removido <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script> do arquivo php externo e funciona sem o aviso.

Pelo que entendi ao carregar o primeiro arquivo (arquivo1), carrego jquery-1.10.2.jse como a página não é recarregada (ela envia dados para o arquivo php externo usando jquery $.post) e jquery-1.10.2.jscontinua a existir. Portanto, não é necessário novamente para carregá-lo.

Eu recebi essa exceção ao definir o URL na consulta como "example.com/files/text.txt". Alterei o URL para " http://example.com/files/text.txt " e essa exceção desapareceu.

E recebi essa exceção por incluir um script can.js em outro, por exemplo,

{{>anotherScript}}

Em um aplicativo MVC, recebi esse aviso porque estava abrindo uma janela do Kendo com um método que estava retornando um View (), em vez de um PartialView (). O View () estava tentando recuperar novamente todos os scripts da página.

Isso estava acontecendo comigo no ZF2. Eu estava tentando carregar o conteúdo Modal, mas esqueci de desativar o layout antes.

Assim:

$viewModel = new ViewModel();
$viewModel->setTerminal(true);
return $viewModel;

Como @Nycen, também recebi esse erro por causa de um link para o Cloudfare. A minha foi para o Select2 plugin .

para corrigi-lo acabei de remover

 src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"

e o erro foi embora.

1. No Chrome, press F12
2. Ferramentas de desenvolvimento-> pressione F1.
3. Consulte configurações-> geral-> aparência: "Don't show chrome Data Saver warning"- marque esta caixa de seleção.
4. Consulte configurações-> geral-> console: "Log XMLHTTPRequest"- defina esta caixa de seleção também.

Aproveitar

Isso está resolvido no meu caso.

JS

$.ajaxPrefilter(function( options, original_Options, jqXHR ) {
    options.async = true;
});

Esta resposta foi inserida neste link

/programming/28322636/synchronous-xmlhttprequest-warning-and-script

No meu caso, isso foi causado pelo script flexie, que fazia parte do aplicativo "CDNJS Selections" oferecido pelo Cloudflare .

De acordo com o Cloudflare "Este aplicativo está sendo descontinuado em março de 2015". Eu desliguei e a mensagem desapareceu instantaneamente.

Você pode acessar os aplicativos visitando https://www.cloudflare.com/a/cloudflare-apps/seudominio.com

NB: esta é uma cópia da minha resposta neste tópico Aviso síncrono do XMLHttpRequest e <script> (visitei os dois ao procurar uma solução)

Corrigi isso com as etapas abaixo:

1. Verifique seus scripts CDN e adicione-os localmente.
2. Mova suas inclusões de scripts para a seção de cabeçalho.

No meu caso particular, eu estava processando um Rails parcial sem o render layout: falsequal estava processando novamente o layout inteiro, incluindo todos os scripts na <head>tag. A adição render layout: falseà ação do controlador corrigiu o problema.

Para mim, o problema era que, em uma solicitação OK, esperava que a resposta ajax fosse uma sequência HTML bem formatada, como uma tabela, mas, nesse caso, o servidor estava com um problema com a solicitação, redirecionando para uma página de erro, e, portanto, estava retornando o código HTML da página de erro (que tinha uma <scriptmarca em algum lugar. Eu consolei a resposta ajax e foi aí que percebi que não era o que eu estava esperando e depois procedi à minha depuração.

A questão foi levantada em 2014 e é 2019, então acho que é bom procurar uma opção melhor.

Você pode simplesmente usar a fetchAPI em Javascript, que fornece mais flexibilidade.

por exemplo, veja este código

fetch('./api/some.json')
    .then((response) => {
        response.json().then((data) => { 
            ... 
        });
    })
    .catch((err) => { ... });