JavaScript console.log provoque une erreur: «XMLHttpRequest synchrone sur le thread principal est obsolète…»

J’ai ajouté des journaux à la console pour vérifier l’état des différentes variables sans utiliser le débogueur de Firefox.

Cependant, dans de nombreux endroits où j’ajoute une console.log dans mon fichier main.js , je reçois l’erreur suivante au lieu de mes beaux messages manuscrits:

Synchronous XMLHttpRequest sur le thread principal est déconseillé en raison de ses effets néfastes sur l’expérience de l’utilisateur final. Pour plus d’aide http://xhr.spec.whatwg.org/

Quelles alternatives ou encapsuleurs pour console.log puis-je append à mon utilisation du code qui ne provoquera pas cette erreur?

Est-ce que je le “fais mal”?

Cela m’est arrivé lorsque j’étais paresseux et que j’avais inclus une balise de script dans le contenu renvoyé. En tant que tel:

Contenu HTML partiel:

 
SOME CONTENT HERE

Il semble, du moins dans mon cas, que si vous retournez du contenu HTML comme celui-ci via xhr, vous obligerez jQuery à appeler pour obtenir ce script. Cet appel se produit avec un indicateur asynchrone faux car il suppose que vous avez besoin du script pour continuer à charger.

Dans des situations comme celle-ci, vous seriez mieux servi en consultant un cadre de liaison et en retournant simplement un object JSON, ou en fonction de votre backend et de votre modèle, vous pourriez modifier la façon dont vous chargez vos scripts.

Vous pouvez également utiliser getScript() de jQuery pour récupérer des scripts pertinents. Voici un violon, c’est juste une copie droite de l’exemple jQuery, mais je ne vois aucun avertissement lancé lorsque les scripts sont chargés de cette manière.

Exemple

  

http://jsfiddle.net/49tkL0qd/

Le message d’avertissement PEUT ÊTRE dû à une requête XMLHttpRequest dans le thread principal avec l’indicateur asynchrone défini sur false.

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

Synchronous XMLHttpRequest en dehors des employés est en train d’être supprimé de la plate-forme Web car il a des effets néfastes sur l’expérience de l’utilisateur final. (Il s’agit d’un long processus qui prend de nombreuses années.) Les développeurs ne doivent pas transmettre de faux pour l’argument asynchrone lorsque l’environnement global JavaScript est un environnement de document. Les agents utilisateurs sont vivement encouragés à avertir d’une telle utilisation dans les outils de développement et peuvent expérimenter la génération d’une exception InvalidAccessError lorsqu’elle se produit.

La future direction consiste à n’autoriser que XMLHttpRequests dans les threads de travail. Le message est destiné à être un avertissement à cet effet.

J’étais également confronté au même problème mais capable de le résoudre en mettant async: true. Je sais que c’est par défaut vrai mais ça marche quand je l’écris explicitement

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

Le débogueur en direct de Visual Studio 2015/2017 injecte du code contenant l’appel obsolète.

Parfois, il est nécessaire d’ajaxer un script mais de retarder le document jusqu’à ce que le script soit chargé.

jQuery prend cela en charge avec la fonction holdReady() .

Exemple d’utilisation:

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

Le chargement du script proprement dit est asynchrone ( pas d’erreur ), mais l’effet est synchrone si le rest de votre code JavaScript s’exécute après que le document soit prêt .

Cette fonctionnalité avancée est généralement utilisée par les chargeurs de scripts dynamics qui souhaitent charger du code JavaScript supplémentaire, tel que les plug-ins jQuery, avant de permettre à l’événement prêt de se produire, même si le DOM est prêt.

Documentation:
http://api.jquery.com/jquery.holdready

La réponse partielle @Webgr m’a en fait aidé à déboguer cet avertissement @ journal de la console, dommage que l’autre partie de cette réponse apporte autant de points faibles 🙁

En tout cas, voici comment j’ai découvert la cause de cet avertissement dans mon cas:

  1. Utiliser le navigateur Chrome> Appuyez sur F12 pour intégrer les outils DevTools
  2. Ouvrez le menu du tiroir (dans Chrome 3 points verticaux en haut à droite)
  3. Sous Console > cochez l’option Log XMLHttpRequests
  4. Rechargez votre page qui vous a donné l’erreur et observez ce qui se passe sur chaque requête ajax dans le journal de la console.

Dans mon cas, un autre plugin chargeait 2 librairies .js après chaque appel ajax, ce qui n’était absolument pas nécessaire ni nécessaire. La désactivation du plug-in non fiable a supprimé l’avertissement du journal. A partir de là, vous pouvez soit essayer de résoudre le problème vous-même (par exemple, limiter le chargement des scripts à certaines pages ou à certains événements – ceci est beaucoup trop spécifique pour une réponse ici) ou contacter un développeur tiers pour le résoudre.

J’espère que cela aide quelqu’un.

Pour éviter cet avertissement, n’utilisez pas:

 async: false 

dans tous vos appels $ .ajax (). C’est la seule fonctionnalité de XMLHttpRequest qui est obsolète.

La valeur par défaut est

 async: true 

jQuery a déconseillé la synchronisation XMLHTTPRequest

J’ai regardé les réponses toutes impressionnantes. Je pense qu’il devrait fournir le code qui lui pose un problème. Compte tenu de l’exemple ci-dessous, si vous avez un script à lier à jquery dans page.php, vous obtenez cette notification.

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

Je reçois un tel avertissement dans les cas suivants:

1) file1 contenant . La page a des champs de saisie. J’entre une valeur dans le champ de saisie et cliquez sur le bouton. Jquery envoie une entrée au fichier php externe.

2) le fichier php externe contient également jquery et dans le fichier php externe, j’ai également inclus . Parce que si j’ai reçu l’avertissement.

Suppression de du fichier php externe et fonctionne sans avertissement.

jquery-1.10.2.js je comprends bien le chargement du premier fichier (fichier1), je charge jquery-1.10.2.js et comme la page ne se recharge pas (elle envoie des données au fichier php externe en utilisant jquery $.post ), puis jquery-1.10.2.js continue d’exister. Donc pas nécessaire à nouveau pour le charger.

J’ai eu cette exception lorsque j’ai défini url dans query comme “example.com/files/text.txt”. J’ai changé l’URL à ” http://example.com/files/text.txt ” et cette exception a disparu.

Et j’ai eu cette exception pour inclure un script can.js dans un autre, par exemple,

 {{>anotherScript}} 

Dans une application MVC, j’ai reçu cet avertissement car j’ouvrais une fenêtre Kendo avec une méthode renvoyant un View (), au lieu d’un PartialView (). The View () essayait de retracer tous les scripts de la page.

Ça m’arrivait dans ZF2. J’essayais de charger le contenu Modal mais j’ai oublié de désactiver la mise en page avant.

Alors:

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

Comme @Nycen, j’ai aussi eu cette erreur à cause d’un lien vers Cloudfare. Le mien était pour le plugin Select2 .

pour le réparer je viens de supprimer

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

et l’erreur a disparu.

Dans mon cas, cela était dû au script Flexie qui faisait partie de l’application “CDNJS Selections” proposée par Cloudflare .

Selon Cloudflare “Cette application est déconseillée en mars 2015”. Je l’ai éteint et le message a disparu instantanément.

Vous pouvez accéder aux applications en visitant https://www.cloudflare.com/a/cloudflare-apps/yourdomain.com

NB: ceci est une copie de ma réponse sur ce fil d’ avertissement Synchronous XMLHttpRequest et

  1. Dans Chrome, press F12
  2. Outils de développement -> appuyez sur F1 .
  3. Voir parameters-> général-> Apparence: "Don't show chrome Data Saver warning" – cochez cette case.
  4. Voir parameters-> général-> Console: "Log XMLHTTPRequest" – cochez cette case également.

Prendre plaisir

J’ai corrigé ceci avec les étapes ci-dessous:

  1. Vérifiez vos scripts CDN et ajoutez-les localement.
  2. Déplacer vos scripts inclus dans la section d’en-tête.

Ceci est résolu dans mon cas.

JS

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

Cette réponse a été insérée dans ce lien

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

Dans mon cas particulier, je rendais un partiel Rails sans render layout: false qui restituait l’intégralité de la mise en page, y compris tous les scripts de la . Ajouter une render layout: false à l’action du contrôleur a corrigé le problème.

Pour moi, le problème était que dans une requête OK, je m’attendais à ce que la réponse ajax soit une chaîne HTML bien formatée telle qu’une table, mais dans ce cas, le serveur rencontrait un problème de redirection vers une page d’erreur. et retournait donc le code HTML de la page d’erreur (qui contenait une