JavaScript console.log menyebabkan kesalahan: "Synchronous XMLHttpRequest pada utas utama sudah usang ..."

386

Saya telah menambahkan log ke konsol untuk memeriksa status variabel yang berbeda tanpa menggunakan debugger Firefox.

Namun, di banyak tempat di mana saya menambahkan file console.logsaya main.js, saya menerima kesalahan berikut alih-alih pesan tulisan tangan kecil yang indah untuk diri saya sendiri:

Sinkronisasi XMLHttpRequest pada utas utama sudah usang karena efeknya yang merugikan bagi pengalaman pengguna akhir. Untuk bantuan lebih lanjut http://xhr.spec.whatwg.org/

Alternatif atau pembungkus apa yang console.logdapat saya tambahkan ke penggunaan kode saya yang tidak akan menyebabkan kesalahan ini?

Apakah saya "salah melakukannya"?

Nathan Basanese
sumber
8
Saya tidak melihat bagaimana panggilan console.log () akan menyebabkan panggilan ajax, kecuali ada semacam plugin logging jarak jauh yang diaktifkan atau apa pun.
Marc B
Saya tidak yakin itu melakukan panggilan ajax. Apakah akan membantu jika saya menyertakan tangkapan layar?
Nathan Basanese
6
xmlhttprequest adalah permintaan ajax, pada dasarnya.
Marc B
14
<script>$.ajaxPrefilter(function( options, originalOptions, jqXHR ) { options.async = true; });</script> ini akan menghilangkan peringatan. Anda dapat melihat di sini untuk masalah yang sama.
Akilsree1
1
Saya hanya menggunakan alih-alih mengirim, itu membantu. jQuery.
Stas Kazanin

Jawaban:

278

Ini terjadi pada saya ketika saya malas dan menyertakan tag skrip sebagai bagian dari konten yang dikembalikan. Dengan demikian:

Konten HTML Sebagian:

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

Tampaknya, setidaknya dalam kasus saya, bahwa jika Anda mengembalikan konten HTML seperti itu melalui xhr, Anda akan menyebabkan jQuery melakukan panggilan untuk mendapatkan skrip itu. Panggilan itu terjadi dengan flag async false karena menganggap Anda memerlukan skrip untuk melanjutkan memuat.

Dalam situasi seperti ini, Anda akan lebih baik dilayani dengan melihat ke dalam kerangka kerja sejenis dan hanya mengembalikan objek JSON, atau tergantung pada backend Anda dan templating Anda bisa mengubah cara Anda memuat skrip Anda.

Anda juga bisa menggunakan jQuery'sgetScript() untuk mengambil skrip yang relevan. Ini biola, Ini hanya salinan langsung dari contoh jQuery, tapi saya tidak melihat peringatan yang dilemparkan ketika skrip dimuat seperti itu.

Contoh

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

http://jsfiddle.net/49tkL0qd/

kroolk
sumber
8
kesalahannya adalah karena OP menggunakan XMLHttpRequests yang disinkronkan, saya tidak berpikir jquery karena sepertinya dia tidak menggunakannya ... namun ini terjadi pada saya ketika saya mencoba memuat <script>seperti yang Anda katakan dalam panggilan balik panggilan asinkron ajax. Panggilan ajax saya asinkron namun dalam callback saya membuat $('#object').html(data)data htmldengan <script>dan ketika baris ini dijalankan kesalahan muncul di js console. +1 !!! Terima kasih :).
albciff
2
Untuk proyek ini, saya memang menggunakan JQuery.
Nathan Basanese
1
@ 37coins, apakah ini jawabannya; tandai begitu .. dan ganti tag javascript dengan jQuery.
Brett Caswell
3
Ini adalah masalah saya, dan kemungkinan besar masalah OP juga - OP tolong pertimbangkan untuk menandai ini sebagai jawabannya. Jawaban dengan suara lebih tinggi di sini saat ini tidak membantu orang dengan masalah ini, jadi menerima jawaban ini akan sangat membantu orang lain.
Nick Coad
1
hanya FYI jQuery getScript memecah cache. Saya pikir .ajax akan melakukan hal yang sama dan memungkinkan untuk melakukan caching
Ronnie Royston
75

Pesan peringatan DAPAT MENJADI karena permintaan XMLHttpRequest dalam utas utama dengan flag async disetel ke false.

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

Synchronous XMLHttpRequest di luar pekerja sedang dalam proses dihapus dari platform web karena memiliki efek yang merugikan pengalaman pengguna akhir. (Ini adalah proses panjang yang membutuhkan waktu bertahun-tahun.) Pengembang tidak boleh memberikan false untuk argumen async ketika lingkungan global JavaScript adalah lingkungan dokumen. Agen pengguna sangat disarankan untuk memperingatkan tentang penggunaan tersebut dalam alat pengembang dan dapat bereksperimen dengan melempar pengecualian InvalidAccessError saat itu terjadi.

Arah di masa depan adalah hanya mengizinkan XMLHttpRequests di utas pekerja. Pesan itu dimaksudkan sebagai peringatan untuk efek itu.

PedanticDan
sumber
6
tidak, peringatan pesan PRESUMABLY karena permintaan XMLHttpRequest dalam utas utama dengan flag async disetel ke false. Ini bisa jadi bug di Firefox (tetapi kemungkinan fitur / implementasi jQuery); Bagaimanapun, bagaimana menggambarkan bagian dari spesifikasi dianggap sebagai jawaban untuk pertanyaan yang diklaim console.logmengirimkan peringatan ini?
Brett Caswell
1
@ Brett - dua kalimat terakhir dari jawaban saya menjelaskan mengapa saya memasukkan bagian dari spesifikasi yang saya lakukan. Saya akan mengedit jawaban saya menjadi lebih tepat.
PedanticDan
2
dengan semua yang dikatakan, Segala sesuatu yang Anda nyatakan dalam jawaban ini adalah informasi yang benar; lebih jauh lagi, itu kemungkinan relevan dengan masalah yang mungkin terjadi; yaitu, peningkatan peringatan ini memengaruhi perilaku dan / atau stabilitas debugger. Dengan demikian, solusinya mungkin sangat baik untuk menjaga peringatan agar tidak naik dengan memperbaiki penyebabnya.
Brett Caswell
Mereka harus menambahkan flag about: untuk mengaktifkannya untuk debugging lokal. Sync XHR bisa sangat berguna untuk kerangka kerja tooling / debug yang menjalankan localhost.
user2800679
62

Saya juga menghadapi masalah yang sama tetapi dapat memperbaikinya dengan meletakkan async: true. Saya tahu ini secara default benar tetapi berfungsi ketika saya menulisnya secara eksplisit

$.ajax({
   async: true,   // this will solve the problem
   type: "POST",
   url: "/Page/Method",
   contentType: "application/json",
   data: JSON.stringify({ ParameterName: paramValue }),
});
Irfan Ashraf
sumber
2
Itu bukan alasan dalam kasus saya ... hanya menghapus async: false tanpa mengubah ke true tetap itu
hsobhy
@Irfan dalam kasus saya pengaturan sinkronisasi: false yang membantu!
t_plusplus
34

Debugger hidup Visual Studio 2015/2017 menyuntikkan kode yang berisi panggilan usang.

Charlie
sumber
13
Saya menghabiskan beberapa waktu untuk mencari tahu mengapa saya melihat peringatan ini; Saya pikir saya akan membagikan pertanyaan SO yang paling tepat sehingga yang lain bisa menghemat waktu.
Charlie
22

Kadang-kadang perlu ajax memuat skrip tetapi menunda dokumen siap sampai setelah skrip dimuat.

jQuery mendukung ini dengan holdReady()fungsinya.

Contoh penggunaan:

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

Pemuatan skrip yang sebenarnya adalah asinkron ( tidak ada kesalahan ), tetapi efeknya sinkron jika seluruh JavaScript Anda berjalan setelah dokumen siap .

Fitur lanjutan ini biasanya digunakan oleh pemuat skrip dinamis yang ingin memuat JavaScript tambahan seperti plugin jQuery sebelum mengizinkan acara siap terjadi, meskipun DOM mungkin sudah siap.

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


PEMBARUAN 7 Januari 2019

Dari JQMIGRATE :

jQuery.holdReady () sudah usang

Penyebab: The jQuery.holdReady()Metode telah usang karena efek yang merugikan pada kinerja global halaman. Metode ini dapat mencegah semua kode pada halaman dari inisialisasi untuk jangka waktu yang lama.

Solusi: Tulis ulang halaman sehingga tidak mengharuskan semua penangan siap jQuery ditunda. Ini dapat dilakukan, misalnya, dengan hanya memuat kode yang membutuhkan keterlambatan saat aman untuk dijalankan. Karena kompleksitas metode ini, jQuery Migrate tidak berupaya mengisi fungsionalitas. Jika versi mendasar dari jQuery yang digunakan dengan jQuery Migrate tidak lagi berisi jQuery.holdReady()kode akan gagal tak lama setelah peringatan ini muncul.

Dem Pilafian
sumber
17

Untuk menghindari peringatan ini, jangan gunakan:

async: false

dalam panggilan $ .ajax () Anda. Ini adalah satu-satunya fitur XMLHttpRequest yang sudah usang.

Standarnya adalah

async: true

jQuery telah mencabut XMLHTTPRequest sinkron

Sonu K
sumber
13

@Webgr sebagian jawaban sebenarnya membantu saya men-debug peringatan ini @ konsol log, malu bagian lain dari jawaban itu membawa banyak downvotes :(

Ngomong-ngomong, inilah cara saya mengetahui apa penyebab peringatan ini dalam kasus saya:

  1. Gunakan Chrome Browser> Hit F12 untuk membawa DevTools
  2. Buka menu laci (di Chrome 3 titik vertikal di kanan atas)
  3. Di bawah Konsol > centang Log XMLHttpRequests opsi
  4. Muat ulang halaman Anda yang memberi Anda kesalahan dan amati apa yang terjadi pada setiap permintaan ajax di log konsol.

Dalam kasus saya, plugin lain memuat 2 perpustakaan .js setelah setiap panggilan ajax, yang sama sekali tidak diperlukan atau diperlukan. Menonaktifkan plugin jahat menghapus peringatan dari log. Dari titik itu, Anda dapat mencoba untuk memperbaiki masalah sendiri (misalnya membatasi memuat skrip ke halaman atau acara tertentu - ini terlalu spesifik untuk jawaban di sini) atau hubungi pengembang plugin pihak ke-3 untuk menyelesaikannya.

Semoga ini bisa membantu seseorang.

dev101
sumber
// , Terima kasih atas jawabannya! Pertanyaan ini hanya merujuk ke Firefox. Saya tertarik melihat hal itu terjadi di Chrome. Ini sepertinya hanya menghapus peringatan, daripada benar-benar memperbaiki masalah. Apakah itu benar?
Nathan Basanese
Tampaknya Chrome memiliki hal-hal yang lebih maju di DevTools daripada versi Firefox. Fakta bahwa itu tidak dilaporkan di Firefox tidak berarti itu tidak ada. Ini sepenuhnya memperbaiki masalah saya, bukan hanya menyembunyikannya. Saya telah menghapus skrip dari plugin yang bermasalah dan halaman yang 'dimuat ulang' pada setiap panggilan ajax.
dev101
//, Apakah menurut Anda layak mengangkat masalah dengan pengembang Firefox?
Nathan Basanese
Tidak, tidak perlu. Saya baru saja menguji ulang kasus saya dengan Firefox terbaru dan peringatan "Synchronous XMLHttpRequest di utas utama ..." juga telah dilaporkan dalam log konsol. Jadi, itu, setidaknya dalam kasus saya, bukan masalah khusus browser. Sekarang, bagaimana Anda dapat menggunakan Firefox untuk men-debug XMLHttpRequest melalui tab Network, dengan menonton sumber daya .js dipanggil setelah setiap permintaan ajax. Melakukan hal yang sama, meskipun lebih ramping / difilter di Chrome. developer.mozilla.org/en-US/docs/Tools/Network_Monitor
dev101
8

Saya telah melihat jawaban yang mengesankan. Saya pikir Dia harus memberikan kode yang memberinya masalah. Diberikan contoh di bawah ini, Jika Anda memiliki skrip untuk ditautkan ke jquery di page.php maka Anda mendapatkan pemberitahuan itu.

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

Saya mendapatkan peringatan seperti itu dalam kasus berikut:

1) file1 yang berisi <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script> . Halaman memiliki kolom input. Saya memasukkan beberapa nilai di kolom input dan klik tombol. Jquery mengirimkan input ke file php eksternal.

2) file php eksternal juga mengandung jquery dan dalam file php eksternal saya juga disertakan <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script> . Karena jika ini saya mendapat peringatan.

Dihapus <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script> dari file php eksternal dan berfungsi tanpa peringatan.

Seperti yang saya pahami tentang memuat file pertama (file1), saya memuat jquery-1.10.2.jsdan karena halaman tidak memuat ulang (mengirimkan data ke file php eksternal menggunakan jquery $.post), maka jquery-1.10.2.jsterus ada. Jadi tidak perlu lagi memuatnya.

Andris
sumber
5

Saya mendapatkan pengecualian ini ketika saya menetapkan url di kueri seperti "example.com/files/text.txt". Saya telah mengubah url menjadi " http://example.com/files/text.txt " dan pengecualian ini hilang.

Radren
sumber
Masalah saya juga sepertinya ada hubungannya dengan URL. Saya menyalin sebuah skrip ke URL sementara untuk mengerjakannya, dan saat itulah kesalahan muncul. Bukan dari URL asli.
jeffery_the_wind
5

Dan saya mendapatkan pengecualian ini untuk memasukkan satu skrip can.js ke dalam skrip lain, misalnya,

{{>anotherScript}}
Charles Merriam
sumber
Ini tampaknya menjadi penyebab utama (memuat <scripts> tambahan dan menambahkannya ke <head> di DOM)
Memulihkan Nerdaholic
5

Dalam aplikasi MVC, saya mendapat peringatan ini karena saya membuka Kendo Window dengan metode yang mengembalikan View (), bukan PartialView (). Tampilan () mencoba membuka kembali semua skrip halaman.

Misi
sumber
5

Itu terjadi pada saya di ZF2. Saya mencoba memuat konten Modal tetapi saya lupa menonaktifkan tata letak sebelumnya.

Begitu:

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

Seperti @Nycen, saya juga mendapatkan kesalahan ini karena tautan ke Cloudfare. Milik saya adalah untuk plugin Select2 .

untuk memperbaikinya saya baru saja dihapus

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

dan kesalahan itu hilang.

Beras Rockwell
sumber
5
  1. Di Chrome, press F12
  2. Alat develomping-> tekan F1.
  3. Lihat pengaturan-> umum-> Penampilan: "Don't show chrome Data Saver warning"- setel kotak centang ini.
  4. Lihat pengaturan-> umum-> Konsol: "Log XMLHTTPRequest"- setel kotak centang ini juga.

Nikmati

Webgr
sumber
4

Dalam kasus saya ini disebabkan oleh skrip flexie yang merupakan bagian dari aplikasi "Seleksi CDNJS" yang ditawarkan oleh Cloudflare .

Menurut Cloudflare "Aplikasi ini tidak digunakan lagi pada bulan Maret 2015". Saya mematikannya dan pesan itu langsung menghilang.

Anda dapat mengakses aplikasi dengan mengunjungi https://www.cloudflare.com/a/cloudflare-apps/yourdomain.com

NB: ini adalah salinan jawaban saya di utas ini Synchronous XMLHttpRequest warning and <script> (Saya mengunjungi keduanya ketika mencari solusi)

Nycen
sumber
3

Saya memperbaikinya dengan langkah-langkah di bawah ini:

  1. Periksa skrip CDN Anda dan tambahkan secara lokal.
  2. Pindahkan skrip Anda ke dalam bagian tajuk.
mzonerz
sumber
3

Dalam kasus khusus saya, saya membuat sebagian Rails tanpa render layout: falseyang rendering ulang seluruh tata letak, termasuk semua skrip dalam <head>tag. Menambahkan render layout: falseke tindakan pengontrol memperbaiki masalah.

dps
sumber
3

Bagi saya, masalahnya adalah bahwa dalam permintaan OK, saya mengharapkan respons ajax menjadi string HTML yang diformat dengan baik seperti tabel, tetapi dalam kasus ini, server mengalami masalah dengan permintaan, mengarahkan ke halaman kesalahan, dan karena itu mengembalikan kembali kode HTML dari halaman kesalahan (yang memiliki <scripttag di suatu tempat. Saya menghibur login respon ajax dan saat itulah saya menyadari itu bukan apa yang saya harapkan, kemudian mulai melakukan debugging saya.

gthuo
sumber
2

Pertanyaannya muncul pada tahun 2014 dan ini tahun 2019 jadi saya kira itu baik untuk mencari opsi yang lebih baik.

Anda cukup menggunakan fetch api dalam Javascript yang memberi Anda lebih banyak fleksibilitas.

misalnya, lihat kode ini

fetch('./api/some.json')
    .then((response) => {
        response.json().then((data) => { 
            ... 
        });
    })
    .catch((err) => { ... });
Anirudha Gupta
sumber
Apakah ini js murni, tidak memerlukan plugin?
Alok
1
@Alok Ya, Silakan lihat pengembang
ini.google.com/web/updates/2015/03/introduction-to-fetch