it-swarm.dev

JavaScript console.log powoduje błąd: "Synchroniczne XMLHttpRequest w głównym wątku jest przestarzałe ..."

Dodałem dzienniki do konsoli, aby sprawdzić status różnych zmiennych bez korzystania z debugera Firefox. 

Jednak w wielu miejscach, w których dodaję console.log do mojego pliku main.js, otrzymuję następujący błąd zamiast moich pięknych, odręcznych wiadomości do siebie: 

Synchroniczne XMLHttpRequest w głównym wątku jest przestarzałe ze względu na jego szkodliwe skutki dla użytkownika końcowego. Aby uzyskać dodatkową pomoc http://xhr.spec.whatwg.org/

Jakie alternatywy lub opakowania dla console.log mogę dodać do mojego użycia kodu, które nie spowoduje tego błędu? 

Czy "robię to źle"? 

337
Nathan Basanese

Przydarzyło mi się to, gdy byłem leniwy i dołączałem tag skryptu jako część zwracanej treści. Takie jak:

Częściowa zawartość HTML:

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

Wydaje mi się, przynajmniej w moim przypadku, że jeśli zwrócisz zawartość HTML w ten sposób przez xhr, spowodujesz, że jQuery wykona połączenie, aby uzyskać ten skrypt. To wywołanie ma miejsce z błędem flagi asynchronicznej, ponieważ zakłada on, że skrypt ma kontynuować ładowanie. 

W sytuacjach takich jak ten lepiej będzie Ci posłużyć się przeglądaniem jakiegoś wiążącego szkieletu i właśnie zwracaniem obiektu JSON lub w zależności od twojego zaplecza i szablonów możesz zmienić sposób ładowania skryptów. 

Możesz także użyć jQuery's getScript() , aby pobrać odpowiednie skrypty. Oto skrzypce, to po prostu prosta kopia przykładu jQuery, ale nie widzę żadnych ostrzeżeń generowanych podczas ładowania skryptów w ten sposób.

Example

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

http://jsfiddle.net/49tkL0qd/

254
kroolk

Komunikat ostrzegawczy MOŻE być spowodowany żądaniem XMLHttpRequest w wątku głównym z ustawioną flagą asynchroniczną na false.

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

Synchroniczne XMLHttpRequest poza robotami jest w trakcie usunięto z platformy internetowej, ponieważ ma szkodliwe skutki do doświadczenie użytkownika końcowego. (Jest to długi proces, który zajmuje wiele ___. Lat.) Programiści nie mogą przekazywać fałszywych argumentów asynchronicznych, gdy Globalne środowisko JavaScript jest środowiskiem dokumentu. Aplikacje użytkownika zdecydowanie zaleca się ostrzec o takim użyciu w narzędziach programistycznych. i może eksperymentować z odrzucaniem wyjątku InvalidAccessError, gdy Pojawia się.

Przyszłym kierunkiem jest dopuszczenie tylko XMLHttpRequests w wątkach roboczych. Wiadomość ma być ostrzeżeniem dla tego efektu.

67
PedanticDan

Miałem też do czynienia z tym samym problemem, ale mogłem go naprawić, umieszczając async: true. Wiem, że domyślnie jest to prawda, ale działa, gdy piszę to jawnie

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

Visual debugger na żywo w programie Visual Studio 2015/2017 wprowadza kod zawierający wycofane połączenie.

28
Charlie

Czasami konieczne jest załadowanie skryptu ajax, ale opóźnienie dokument gotowy dopóki nie zostanie załadowany skrypt.

jQuery obsługuje tę funkcję funkcją holdReady().

Przykładowe użycie:

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

Faktyczne ładowanie skryptu jest asynchroniczne (no error), ale efekt jest synchroniczny, jeśli reszta kodu JavaScript działa po dokument gotowy.

Ta funkcja zaawansowana jest zwykle używana przez skrypt dynamiczny ładowarki, które chcą załadować dodatkowy JavaScript, taki jak wtyczki jQuery przed zezwoleniem na wystąpienie gotowego zdarzenia, nawet jeśli DOM może być gotowy.

Dokumentacja:
https://api.jquery.com/jquery.holdready


AKTUALIZACJA 7 stycznia 2019 r

Od JQMIGRATE :

Metoda jQuery.holdReady () jest przestarzała

Przyczyna: Metoda jQuery.holdReady() została uznana za przestarzałą ze względu na jej szkodliwy wpływ na globalną wydajność strony. Ta metoda może zapobiec inicjalizacji całego kodu na stronie przez dłuższy czas.

Solution: Przepisz stronę tak, aby nie wymagała opóźnienia wszystkich programów obsługi gotowych do pracy w jQuery. Można to osiągnąć, na przykład, przez późne ładowanie tylko kodu, który wymaga opóźnienia, kiedy można go bezpiecznie uruchomić. Ze względu na złożoność tej metody, jQuery Migrate nie próbuje wypełnić tej funkcji. Jeśli podstawowa wersja jQuery używana z jQuery Migrate nie zawiera już jQuery.holdReady(), kod zakończy się niepowodzeniem wkrótce po pojawieniu się tego ostrzeżenia.

15
Dem Pilafian

Aby uniknąć tego ostrzeżenia, nie używaj:

async: false

w dowolnej z twoich wywołań $ .ajax (). Jest to jedyna funkcja XMLHttpRequest, która jest przestarzała.

Wartość domyślna to 

async: true

jQuery ma przestarzałe synchroniczne XMLHTTPRequest

13
Sonu K

@ Częściowa odpowiedź @Webgr faktycznie pomogła mi w debugowaniu tego ostrzeżenia @ log konsoli, szkoda, że ​​druga część tej odpowiedzi przyniosła tak wiele notatek :(

Tak czy inaczej, oto jak dowiedziałem się, co było przyczyną tego ostrzeżenia w moim przypadku:

  1. Użyj przeglądarki Chrome> Hit F12, aby zabrać DevTools
  2. Otwórz menu drawer (w Chrome 3 pionowe kropki w prawym górnym rogu)
  3. W opcji Console> zaznacz opcję Log XMLHttpRequests
  4. Załaduj ponownie stronę, która dawała błąd i obserwuj, co dzieje się na każdym żądaniu ajaxowym w dzienniku konsoli.

W moim przypadku inna wtyczka ładowała biblioteki 2 .js po każdym wywołaniu ajax, które absolutnie nie były wymagane ani konieczne. Wyłączenie fałszywej wtyczki usunęło ostrzeżenie z dziennika. Od tego momentu możesz spróbować rozwiązać problem samodzielnie (np. Ograniczyć ładowanie skryptów do określonych stron lub zdarzeń - jest to zbyt szczegółowe, aby znaleźć odpowiedź tutaj) lub skontaktować się z programistą wtyczek zewnętrznych, aby go rozwiązać.

Mam nadzieję, że to pomaga komuś.

11
dev101

Wszystkie odpowiedzi były imponujące. Myślę, że powinien dostarczyć kod, który daje mu problem. Na poniższym przykładzie, jeśli posiadasz skrypt do połączenia z jquery w page.php, otrzymasz to powiadomienie. 

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

Otrzymuję takie ostrzeżenie w następującym przypadku:

1) plik1, który zawiera <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>. Strona ma pola wejściowe. Wprowadzam pewną wartość w polu wprowadzania i klikam przycisk. Jquery wysyła dane do zewnętrznego pliku php.

2) zewnętrzny plik php zawiera również jquery, aw zewnętrznym pliku php zawierałem także <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>. Bo jeśli to dostanę ostrzeżenie. 

Usunięto <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script> z zewnętrznego pliku php i działa bez ostrzeżenia.

Jak rozumiem podczas ładowania pierwszego pliku (file1), ładuję jquery-1.10.2.js, a strona nie ładuje się (wysyła dane do zewnętrznego pliku php za pomocą jquery $.post), a następnie jquery-1.10.2.js nadal istnieje. Nie trzeba więc ponownie go ładować.

5
Andris
  1. W Chrome press F12
  2. Develomping tools-> naciśnij F1.
  3. Zobacz ustawienia-> ogólne-> Wygląd: "Don't show chrome Data Saver warning"- Ustaw to pole wyboru.
  4. Zobacz ustawienia-> ogólne-> Konsola: "Log XMLHTTPRequest" - ustaw to pole wyboru również.

Cieszyć się

4
Webgr

W aplikacji MVC otrzymałem to ostrzeżenie, ponieważ otwierałem okno Kendo z metodą zwracającą widok (), zamiast częściowego widoku (). View () próbował ponownie pobrać wszystkie skrypty strony. 

4
Misi

I mam ten wyjątek dla włączenia jednego skryptu can.js do innego, na przykład

{{>anotherScript}}
4
Charles Merriam

Dostałem ten wyjątek, gdy ustawiłem adres URL w zapytaniu typu "example.com/files/text.txt". Ive zmieniony adres URL na " http://example.com/files/text.txt " i ten wyjątek zniknął.

4
Radren

Podobnie jak @Nycen dostałem ten błąd z powodu linku do Cloudfare. Mój był dla Select2 plugin.

żeby to naprawić, właśnie usunąłem

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

i błąd zniknął.

4
Rockwell Rice

To działo się dla mnie w ZF2 . Próbowałem załadować zawartość Modala, ale wcześniej zapomniałem wyłączyć układ.

Więc:

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

W moim przypadku było to spowodowane przez skrypt flexie, który był częścią aplikacji "CDNJS Selections" oferowanej przez Cloudflare.

Według Cloudflare "Ta aplikacja jest przestarzała w marcu 2015". Wyłączyłem go i wiadomość zniknęła natychmiast.

Możesz uzyskać dostęp do aplikacji, odwiedzając https://www.cloudflare.com/a/cloudflare-apps/twojadomena.com

Uwaga: jest to kopia odpowiedzi na ten wątek ostrzeżenie Synchronous XMLHttpRequest i <script> (odwiedziłem oba, szukając rozwiązania)

3
Nycen

Zostało to rozwiązane w moim przypadku.

JS

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

Ta odpowiedź została wstawiona w tym łączu

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

3
Bagrat Zakaryan

Naprawiłem to poniższymi krokami:

  1. Sprawdź skrypty CDN i dodaj je lokalnie.
  2. Przenieś swoje skrypty do sekcji nagłówka.
2
mzonerz

Dla mnie problemem było to, że w zapytaniu OK oczekiwałem, że odpowiedź ajax będzie dobrze sformatowanym łańcuchem HTML, takim jak tabela, ale w tym przypadku serwer napotkał problem z żądaniem, przekierowując na stronę błędu, w związku z tym wracał kod HTML strony błędu (która miała gdzieś tag <script.) Konsolidowałem logowanie odpowiedzi ajax i wtedy zrozumiałem, że to nie jest to, czego oczekiwałem, po czym przystąpiłem do debugowania.

2
gthuo

W moim szczególnym przypadku renderowałem część Rails bez render layout: false, która ponownie renderowała cały układ, w tym wszystkie skrypty w tagu <head>. Dodanie render layout: false do akcji kontrolera naprawiło problem.

2
dps

Pytanie zadane w 2014 roku i 2019, więc myślę, że dobrze jest szukać lepszej opcji.

Możesz po prostu używać fetch api w JavaScript, co zapewnia większą elastyczność.

na przykład zobacz ten kod

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