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

386

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"?

Nathan Basanese
fonte
8
Não vejo como uma chamada console.log () causaria uma chamada ajax, a menos que haja algum tipo de plug-in de log remoto ativado ou o que seja.
Marc B
Não sei se está fazendo uma ligação ajax. Ajudaria se eu incluísse uma captura de tela?
22914 Nathan Basanese
6
xmlhttprequest é basicamente uma solicitação ajax.
Marc B
14
<script>$.ajaxPrefilter(function( options, originalOptions, jqXHR ) { options.async = true; });</script> isso removerá o aviso. Você pode ver aqui o mesmo problema.
Akilsree1
11
Eu apenas usei get em vez de post, ajudou. jQuery.
Stas Kazanin

Respostas:

278

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/

kroolk
fonte
8
o erro é porque o OP está usando em algum lugar um XMLHttpRequests síncrono, não acho que seja devido ao jquery, pois não parece que ele o use ... no entanto, isso está acontecendo comigo quando tento carregar um <script>como você disse em um retorno de chamada de uma chamada assíncrona ajax. Minha chamada ajax é assíncrona no entanto, no retorno de chamada que faço $('#object').html(data), onde os dados é um pedaço de htmlcom <script>e quando esta linha é executada as aparece erro no js console. +1 !!! obrigado :).
albciff
2
De fato, para este projeto, usei o JQuery.
Nathan Basanese
11
@ 37coins, se essa era a resposta; marque-o assim e substitua a tag javascript pelo jQuery.
Brett Caswell
3
Esse era o meu problema, e provavelmente o problema do OP também - OP, por favor considere marcar isso como a resposta. A resposta mais votada aqui atualmente não ajuda em nada as pessoas com esse problema; portanto, aceitar essa resposta ajudaria imensamente os outros.
precisa
11
apenas FYI jQuery getScript interrompe o cache. Acho .ajax fará mesmo e permitir o caching
Ronnie Royston
75

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.

PedanticDan
fonte
6
não, o aviso de mensagem é PRESUMABLY devido a uma solicitação XMLHttpRequest no encadeamento principal com o sinalizador assíncrono definido como falso. Isso pode muito bem ser um bug no Firefox (mas é provavelmente um recurso / implementação do jQuery); de qualquer maneira, como descrever parte das especificações seria considerado uma resposta a uma pergunta que afirma console.logestar enviando esses avisos?
Brett Caswell
11
@Brett - as duas últimas frases da minha resposta explicam por que incluí a parte das especificações que fiz. Vou editar minha resposta para ser mais preciso.
PedanticDan
2
com tudo o que foi dito, tudo o que você declarou nesta resposta são informações corretas; além disso, é provável que seja relevante para o provável problema; isto é, o aumento desse aviso afeta o comportamento e / ou a estabilidade do depurador. Portanto, a solução alternativa pode muito bem ser impedir que o aviso seja disparado, corrigindo a causa dele.
Brett Caswell
Eles devem adicionar um sinalizador about: para habilitá-lo para depuração local. O Sync XHR pode ser muito útil para estruturas de ferramentas / depuração executando localhost.
user2800679
62

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 }),
});
Irfan Ashraf
fonte
2
Não era a razão, no meu caso ... só que a remoção async: false sem alterar a verdade fixo que
hsobhy
@ Irfan no meu caso, estava definindo sync: false que ajudou!
t_plusplus
34

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

Charlie
fonte
13
Passei um bom tempo tentando descobrir por que estava vendo esse aviso; Imaginei que compartilharia a pergunta SO mais apropriada para que outros pudessem economizar algum tempo.
2828 Charlie
22

À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.

Dem Pilafian
fonte
17

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

Sonu K
fonte
13

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.

dev101
fonte
//, obrigado pela resposta! Esta questão se refere apenas ao Firefox. Estou interessado em ver que ocorreu no Chrome. Isso parece remover o aviso, em vez de realmente resolver o problema. Isso está correto?
Nathan Basanese
Parece que o Chrome tem coisas mais avançadas no DevTools do que na versão Firefox. O fato de não ser relatado no Firefox não significa que não está presente. Isso resolveu completamente o meu problema, não apenas o ocultou. Eu removi os scripts do plug-in problemático e da página que foram 'recarregados' em cada chamada ajax.
Dev101
//, você acha que vale a pena levantar um problema com os desenvolvedores do Firefox?
Nathan Basanese
Não, não é necessário. Acabei de re-testar meu caso com o Firefox mais recente e o aviso "Synchronous XMLHttpRequest on the main thread ..." também foi relatado definitivamente no log do console. Portanto, pelo menos no meu caso, não foi um problema específico do navegador. Agora, como você pode usar o Firefox para depurar XMLHttpRequest via guia Rede, observando os recursos .js serem chamados após cada solicitação de ajax. Faz o mesmo, embora seja mais simplificado / filtrado no Chrome. developer.mozilla.org/pt-BR/docs/Tools/Network_Monitor
dev101
8

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);
   }});
 });
Yoweli Kachala
fonte
6

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.

Andris
fonte
5

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.

Radren
fonte
Meu problema também parece ter a ver com o URL. Copiei um script para um URL temporário para trabalhar nele, e foi aí que o erro apareceu. Não do URL original.
precisa saber é o seguinte
5

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

{{>anotherScript}}
Charles Merriam
fonte
Esta parece ser a causa principal (carga <script> adicionais e anexando-os para o <head> no DOM)
Recuperando Nerdaholic
5

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.

Misi
fonte
5

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;
Ricardo Ruwer
fonte
5

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.

Rockwell Rice
fonte
5
  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

Webgr
fonte
4

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)

Nycen
fonte
3

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.
mzonerz
fonte
3

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.

dps
fonte
3

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.

gthuo
fonte
2

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) => { ... });
Anirudha Gupta
fonte
é este js puro, nenhum plugin requer?
Alok