JavaScript console.log provoca un error: “XMLHttpRequest sincrónico en el hilo principal está en desuso …”

He estado agregando registros a la consola para verificar el estado de diferentes variables sin usar el depurador de Firefox.

Sin embargo, en muchos lugares en los que agrego un archivo main.js en mi archivo main.js , recibo el siguiente error en lugar de mis adorables mensajes manuscritos para mí:

La XMLHttpRequest sincrónica en el hilo principal está en desuso debido a sus efectos perjudiciales para la experiencia del usuario final. Para más ayuda http://xhr.spec.whatwg.org/

¿Qué alternativas o envoltorios para console.log puedo agregar a mi código de uso que no cause este error?

¿Estoy “haciendo las cosas mal”?

Esto me sucedió cuando estaba siendo flojo e incluía una etiqueta de script como parte del contenido que se estaba devolviendo. Como tal:

Contenido parcial de HTML:

 
SOME CONTENT HERE

Parece, al menos en mi caso, que si devuelve contenido HTML así a través de xhr, hará que jQuery realice una llamada para obtener ese script. Esa llamada ocurre con un indicador asíncrono falso, ya que supone que necesita el script para seguir cargando.

En situaciones como esta, sería más útil buscar en un marco vinculante de algún tipo y simplemente devolver un objeto JSON, o dependiendo de su backend y plantillas podría cambiar cómo carga sus scripts.

También podría usar getScript() jQuery para obtener scripts relevantes. Aquí hay un violín, es solo una copia directa del ejemplo de jQuery, pero no veo advertencias cuando los scripts se cargan de esa manera.

Ejemplo

  

http://jsfiddle.net/49tkL0qd/

El mensaje de advertencia PUEDE deberse a una solicitud XMLHttpRequest dentro del hilo principal con el indicador async establecido en falso.

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

La solicitud XMLHttpRequest sincrónica fuera de los trabajadores está siendo eliminada de la plataforma web ya que tiene efectos perjudiciales para la experiencia del usuario final. (Este es un proceso largo que lleva muchos años). Los desarrolladores no deben pasar el argumento asíncrono falso cuando el entorno global de JavaScript es un entorno de documento. Se recomienda encarecidamente a los agentes de usuario que adviertan sobre dicho uso en las herramientas de desarrollo y que experimenten lanzando una excepción InvalidAccessError cuando ocurra.

La dirección futura es solo permitir XMLHttpRequests en subprocesos de trabajo. El mensaje está destinado a ser una advertencia a tal efecto.

También estaba enfrentando el mismo problema pero puedo solucionarlo poniendo asincrónico: cierto. Sé que es cierto por defecto, pero funciona cuando lo escribo explícitamente

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

El depurador directo de Visual Studio 2015/2017 está inyectando código que contiene la llamada obsoleta.

A veces es necesario cargar un script ajax pero demorar el documento listo hasta que se cargue el script.

jQuery lo admite con la función holdReady() .

Ejemplo de uso:

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

La carga del script real es asincrónica ( sin error ), pero el efecto es sincrónico si el rest de su JavaScript se ejecuta después de que el documento esté listo .

Esta característica avanzada normalmente sería utilizada por los cargadores de scripts dynamics que desean cargar JavaScript adicional, como los complementos jQuery, antes de permitir que ocurra el evento listo, aunque el DOM esté listo.

Documentación:
http://api.jquery.com/jquery.holdready

La respuesta parcial de @Webgr en realidad me ayudó a depurar este registro de advertencia en la consola, es una pena que la otra parte de esa respuesta haya traído tantos votos abajo 🙁

De todos modos, aquí es cómo descubrí cuál fue la causa de esta advertencia en mi caso:

  1. Use el navegador Chrome> presione F12 para traer DevTools
  2. Abra el menú del cajón (en Chrome 3 puntos verticales en la esquina superior derecha)
  3. En Console > active la opción Log XMLHttpRequests
  4. Vuelva a cargar la página que le proporcionó el error y observe lo que sucede en cada solicitud de ajax en el registro de la consola.

En mi caso, otro plugin estaba cargando 2 bibliotecas .js después de cada llamada ajax, que no eran absolutamente necesarias ni necesarias. Al deshabilitar el plugin rogue se eliminó la advertencia del registro. A partir de ese punto, puede intentar solucionar el problema usted mismo (por ejemplo, limitar la carga de los scripts a ciertas páginas o eventos, esto es demasiado específico para una respuesta aquí) o ponerse en contacto con el desarrollador del complemento de terceros para resolverlo.

Espero que esto ayude a alguien.

Para evitar esta advertencia, no use:

 async: false 

en cualquiera de sus llamadas $ .ajax (). Esta es la única característica de XMLHttpRequest desaprobada.

El valor predeterminado es

 async: true 

jQuery ha dejado de usar XMLHTTPRequest sincrónico

He estado buscando respuestas impresionantes. Creo que debería proporcionar el código que le está dando un problema. Dado el ejemplo a continuación, si tiene una secuencia de comandos para vincular a jquery en page.php, entonces recibe ese aviso.

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

Recibo tal advertencia en el siguiente caso:

1) archivo1 que contiene . La página tiene campos de entrada. Ingresé algún valor en el campo de entrada y hago clic en el botón. Jquery envía la entrada al archivo php externo.

2) el archivo php externo también contiene jquery y en el archivo php externo también incluí . Porque si esto tengo la advertencia.

Se eliminó del archivo php externo y funciona sin la advertencia.

Como entiendo al cargar el primer archivo (archivo1), cargo jquery-1.10.2.js y como la página no se vuelve a cargar (envía datos al archivo php externo usando jquery $.post ), entonces jquery-1.10.2.js continúan existiendo. Entonces no es necesario volver a cargarlo.

Obtuve esta excepción cuando configuré url en la consulta como “example.com/files/text.txt”. He cambiado la URL a ” http://example.com/files/text.txt ” y esta excepción desapareció.

Y obtuve esta excepción por incluir un script can.js dentro de otro, por ejemplo,

 {{>anotherScript}} 

En una aplicación MVC, recibí esta advertencia porque estaba abriendo una ventana de Kendo con un método que devolvía una vista (), en lugar de una vista parcial (). The View () intentaba recuperar nuevamente todos los scripts de la página.

Me estaba pasando en ZF2. Intentaba cargar el contenido modal pero olvidé desactivar el diseño antes.

Asi que:

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

Como @Nycen, también recibí este error debido a un enlace a Cloudfare. El mío fue para el complemento Select2 .

para arreglarlo acabo de eliminar

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

y el error desapareció

En mi caso, esto fue causado por la secuencia de comandos flexible que era parte de la aplicación “Selecciones CDNJS” ofrecida por Cloudflare .

Según Cloudflare, “esta aplicación está en desuso en marzo de 2015”. Lo apagué y el mensaje desapareció al instante.

Puede acceder a las aplicaciones visitando https://www.cloudflare.com/a/cloudflare-apps/yourdomain.com

NB: esta es una copia de mi respuesta en este hilo Advertencia síncrona XMLHttpRequest y

  1. En Chrome, press F12
  2. Herramientas de desarrollo-> presione F1 .
  3. Ver configuración-> general-> Apariencia: "Don't show chrome Data Saver warning" – configure esta checkbox.
  4. Ver configuración-> general-> Consola: "Log XMLHTTPRequest" – configure también esta checkbox.

Disfrutar

Lo arreglé con los siguientes pasos:

  1. Compruebe sus scripts CDN y agréguelos localmente.
  2. Mueva sus secuencias de comandos incluye en la sección del encabezado.

Esto está resuelto en mi caso.

JS

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

Esta respuesta fue insertada en este enlace

https://stackoverflow.com/questions/28322636/synchronous-xmlhttprequest-warning-and-script

En mi caso particular, estaba renderizando un parcial de Rails sin render layout: false que estaba re-renderizando todo el diseño, incluyendo todos los scripts en la etiqueta . Agregar render layout: false para la acción del controlador solucionó el problema.

Para mí, el problema fue que, en una solicitud OK, esperaba que la respuesta ajax fuera una cadena HTML con formato correcto, como una tabla, pero en este caso, el servidor tenía un problema con la solicitud y redirigía a una página de error. y, por lo tanto, devolvía el código HTML de la página de error (que tenía una etiqueta alguna parte). La consola registraba la respuesta ajax y entonces me di cuenta de que no era lo que esperaba y procedí a realizar mi depuración.