JavaScript console.log verursacht den Fehler: "Synchroner XMLHttpRequest im Hauptthread ist veraltet..."

Question

Ich habe Logs zur Konsole hinzugefügt, um den Status verschiedener Variablen zu überprüfen, ohne den Firefox-Debugger zu verwenden.

Jedoch erhalte ich an vielen Stellen, an denen ich ein console.log in meiner main.js Datei hinzufüge, anstelle meiner schönen kleinen handschriftlichen Nachrichten an mich selbst den folgenden Fehler:

Synchrone XMLHttpRequest im Hauptthread ist veraltet aufgrund seiner schädlichen Auswirkungen auf die Benutzererfahrung. Für weitere Hilfe http://xhr.spec.whatwg.org/

Welche Alternativen oder Wrappers für console.log kann ich in meinem Code verwenden, die diesen Fehler nicht verursachen werden?

Mache ich etwas falsch?

Answer 1

Ich habe diese Ausnahme bekommen, als ich die URL in der Abfrage so gesetzt habe: "example.com/files/text.txt". Ich habe die URL geändert auf "http://example.com/files/text.txt" und diese Ausnahme ist verschwunden.

Answer 2

In meinem Fall wurde dies durch das Flexie-Skript verursacht, das Teil der "CDNJS Selections"-App von Cloudflare war.

Laut Cloudflare wird "Diese App im März 2015 abgeschafft". Ich habe es ausgeschaltet und die Nachricht verschwand sofort.

Sie können auf die Apps zugreifen, indem Sie https://www.cloudflare.com/a/cloudflare-apps/yourdomain.com besuchen.

NB: Dies ist eine Kopie meiner Antwort in diesem Thread Synchronize XMLHttpRequest warning und </a> (Ich habe beide besucht, als ich nach einer Lösung gesucht habe)</p></x-turndown>

Answer 3

Ich habe dies mit den folgenden Schritten behoben:

1. Überprüfen Sie Ihre CDN-Skripte und fügen Sie sie lokal hinzu.
2. Verschieben Sie Ihre Skript-Include-Anweisungen in den Header-Bereich.

Answer 4

Die Frage, die 2014 aufgeworfen wurde, und es ist 2019, also denke ich, dass es gut ist, nach einer besseren Option zu suchen.

Sie können einfach die fetch API in Javascript verwenden, die Ihnen mehr Flexibilität bietet.

Zum Beispiel, sieh dir diesen Code an

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

Answer 5

Für mich lag das Problem darin, dass ich bei einer OK-Anfrage erwartete, dass die Ajax-Antwort ein gut formatierter HTML-String wie zum Beispiel eine Tabelle ist, aber in diesem Fall hatte der Server ein Problem mit der Anfrage, wurde auf eine Fehlerseite umgeleitet und gab daher den HTML-Code der Fehlerseite zurück (der irgendwo einen -Tag hatte). Ich habe die Ajax-Antwort in der Konsole ausgegeben und da wurde mir bewusst, dass es nicht das war, was ich erwartet hatte, also habe ich mit meinem Debugging fortgefahren.