Console JavaScript."synchrone XMLHttpRequest on the main thread is deprecated…"

j'ai ajouté des logs à la console pour vérifier l'état de différentes variables sans utiliser le débogueur Firefox.

cependant, dans de nombreux endroits où j'ajoute un console.log dans mon fichier main.js , je reçois l'erreur suivante au lieu de mes charmants petits messages écrits à la main:

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

quelles alternatives à l'utilisation de console.log puis-je ajouter à mon code d'utilisation qui ne causera pas cette erreur?

est-ce que je "le fais mal"?

314
demandé sur informatik01 2014-07-08 22:39:01
la source

20 ответов

cela m'est arrivé quand j'étais paresseux et que j'ai inclus une étiquette de script dans le contenu retourné. En tant que tel:

Partielle du Contenu HTML:

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

il semble, du moins dans mon cas, que si vous renvoyez du contenu HTML comme celui-ci via xhr, vous obligerez jQuery à faire un appel pour obtenir ce script. Cet appel se produit avec un drapeau async false car il suppose que vous avez besoin du script pour continuer le chargement.

dans des situations comme celle-ci, vous seriez mieux servi en regardant dans un cadre de reliure d'une sorte et en retournant simplement un objet JSON, ou en fonction de votre arrière-plan et de votre Templier, vous pourriez changer la façon dont vous chargez vos scripts.

vous pouvez également utiliser jQuery getScript() pour saisir les scripts pertinents. Voici un violon, c'est juste une copie droite de l'exemple de jQuery, mais je ne vois aucun avertissement lancé quand les scripts sont chargés de cette façon.

exemple

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

http://jsfiddle.net/49tkL0qd /

246
répondu kroolk 2018-02-22 06:55:28
la source

le message d'avertissement peut être dû à une requête XMLHttpRequest dans le thread principal avec le drapeau async placé à false.

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

XMLHttpRequest synchrone en dehors des travailleurs est en cours de d'être retiré de la plate-forme web car il a des effets néfastes à l'expérience de l'utilisateur final. (C'est un long processus qui prend beaucoup de an.) Les développeurs ne doivent pas passer false pour l'argument async lorsque le JavaScript global environment est un environnement de document. Les agents utilisateurs sont fortement encouragés à mettre en garde contre une telle utilisation dans les outils de développement et peut expérimenter de lancer une exception InvalidAccessError il se produit.

la direction future est de n'autoriser les requêtes XMLHTTP que dans les threads worker. Le message se veut un avertissement à cet effet.

63
répondu PedanticDan 2015-03-06 05:21:42
la source

j'étais aussi face à la même question mais capable de la corriger en mettant async: vrai. Je sais que c'est par défaut true 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.stringify({ ParameterName: paramValue }),
});
54
répondu Irfan Ashraf 2016-12-24 11:53:19
la source

le débogueur live de Visual Studio 2015/2017 injecte du code qui contient l'appel déprécié.

27
répondu Charlie 2017-08-03 23:41:14
la source

il est parfois nécessaire de charger un script mais de retarder document prêt jusqu'à ce que le script soit chargé.

jQuery supporte cela avec la fonction holdReady() .

exemple d'usage:

$.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 est asynchrone ( pas d'erreur ), mais l'effet est synchrone si le reste de votre JavaScript s'exécute après "151930920 document" prêt .

ce advanced feature serait typiquement utilisé par dynamic script chargeurs qui veulent charger JavaScript supplémentaire tel que les plugins jQuery avant de permettre l'événement prêt à se produire, même si le DOM peut être prêt.

Documentation:

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

13
répondu Dem Pilafian 2017-02-02 02:18:01
la source

@Webgr la réponse partielle m'a en fait aidé à déboguer cet avertissement @ journal de la console, honte l'autre partie de cette réponse a apporté tant de commentaires négatifs : (

en tout cas, voici comment j'ai découvert quelle était la cause de cet avertissement dans mon cas:

  1. utiliser le navigateur Chrome > appuyez sur F12 pour apporter des DevTools
  2. ouvrir le menu de tiroir (en Chrome 3 points verticaux en haut à droite)
  3. en Vertu de Console > cochez la case Journal XMLHttpRequests option
  4. Rechargez votre page qui vous donnait 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 .js libraries après chaque appel ajax, qui n'étaient absolument pas nécessaires. La désactivation du plugin rogue a supprimé l'avertissement du log. À partir de ce point, vous pouvez soit essayer de corriger le problème vous - même (par exemple limiter le chargement des scripts à certaines pages ou événements-c'est beaucoup trop spécifique pour une réponse ici) ou contacter un développeur de plugin tiers pour le résoudre.

J'espère que ça aidera quelqu'un.

11
répondu dev101 2017-02-06 03:17:05
la source

Pour éviter cet avertissement, ne pas utiliser:

async: false

dans l'un de vos dollars.ajax() appelle. C'est la seule fonctionnalité de XMLHttpRequest qui est dépréciée.

la valeur par défaut est

async: true

jQuery has deprecated synchrone XMLHTTPRequest

10
répondu Sonu K 2017-05-26 20:27:57
la source

j'ai regardé les réponses toutes impressionnantes. Je pense qu'Il devrait fournir le code qui lui donne un problème. Vu l'exemple ci-dessous, si vous avez un script pour créer un lien vers jquery dans la page.php alors vous obtenez cette notification.

$().ready(function () {
    $.ajax({url: "page.php",
        type: 'GET',
        success: function (result) {
        $("#page").html(result);
   }});
 });
6
répondu Yoweli Kachala 2015-10-15 13:06:07
la source

je reçois un tel avertissement dans le cas suivant:

1) file1 qui contient <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script> . Page a des champs d'entrée. J'entre une certaine valeur dans le champ d'entrée et clique sur le bouton. Jquery envoie les entrées au fichier php externe.

2) le fichier php externe contient aussi jquery et dans le fichier php externe j'ai aussi inclus <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script> . Parce que si ça, j'ai eu l'avertissement.

Supprimé <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script> externes dans le fichier php et fonctionne sans l' avertissement.

comme je comprends sur le chargement du premier fichier (file1), je charge jquery-1.10.2.js et comme la page ne se recharge pas (il envoie des données au fichier php externe en utilisant jquery $.post ), puis jquery-1.10.2.js continuent d'exister. Donc pas encore nécessaire de le charger.

5
répondu Andris 2015-06-23 19:29:29
la source

j'ai eu cette exception quand j'ai défini l'url dans la requête comme "example.com/files/text.txt". J'ai changé l'url en " "http://example.com/files/text.txt " et cette exception a disparu.

4
répondu Radren 2015-04-14 12:35:59
la source

et j'ai eu cette exception pour inclure un can.js script à l'intérieur de l'autre, par exemple,

{{>anotherScript}}
4
répondu Charles Merriam 2015-05-26 00:22:56
la source

dans une application MVC, j'ai reçu cet avertissement parce que j'ouvrais une fenêtre Kendo avec une méthode qui retournait une vue(), au lieu d'une vue partielle(). Le View () essayait de récupérer à nouveau tous les scripts de la page.

4
répondu Misi 2015-07-02 11:41:38
la source

ça m'arrivait en ZF2. J'essayais de charger le contenu Modal, mais j'ai oublié de désactiver la mise en page.

:

$viewModel = new ViewModel();
$viewModel->setTerminal(true);
return $viewModel;
4
répondu Ricardo Ruwer 2015-08-04 02:14:18
la source

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

pour le corriger je viens de supprimer

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

et l'erreur a disparu.

4
répondu Rockwell Rice 2015-12-07 17:17:09
la source

dans mon cas, cela a été causé par le script flexie qui faisait partie de L'application" CDNJS sélections "offerte par Cloudflare .

selon Cloudflare"cette application est déprécié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 thread alerte XMLHttpRequest synchrone et