JavaScript console.log ทำให้เกิดข้อผิดพลาด:“ Synchronous XMLHttpRequest บนเธรดหลักเลิกใช้แล้ว…”

ฉันเพิ่มบันทึกลงในคอนโซลเพื่อตรวจสอบสถานะของตัวแปรที่แตกต่างกันโดยไม่ต้องใช้ตัวดีบัก Firefox

อย่างไรก็ตามในหลาย ๆ ที่ที่ฉันเพิ่มconsole.logในmain.jsไฟล์ของฉันฉันได้รับข้อผิดพลาดต่อไปนี้แทนที่จะเป็นข้อความที่เขียนด้วยลายมือที่น่ารักของฉัน:

XMLHttpRequest แบบซิงโครนัสบนเธรดหลักถูกคัดค้านเนื่องจากลักษณะพิเศษที่เป็นอันตรายต่อประสบการณ์ของผู้ใช้ สำหรับความช่วยเหลือเพิ่มเติมhttp://xhr.spec.whatwg.org/

console.logฉันสามารถเพิ่มทางเลือกอื่นในการใช้โปรแกรมเสริมหรือห่อหุ้มซึ่งจะไม่ทำให้เกิดข้อผิดพลาดนี้หรือไม่?

ฉัน "ทำผิด" หรือเปล่า?

สิ่งนี้เกิดขึ้นกับฉันเมื่อฉันขี้เกียจและรวมแท็กสคริปต์ไว้เป็นส่วนหนึ่งของเนื้อหาที่ถูกส่งคืน เช่นนี้:

เนื้อหา HTML บางส่วน:

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

อย่างน้อยก็ในกรณีของฉันปรากฏว่าถ้าคุณส่งคืนเนื้อหา HTML เช่นนั้นผ่านทาง xhr คุณจะทำให้ jQuery โทรออกเพื่อรับสคริปต์นั้น การโทรนั้นเกิดขึ้นพร้อมกับการตั้งค่าสถานะ async เป็นเท็จเนื่องจากคุณต้องการให้สคริปต์โหลดต่อไป

ในสถานการณ์เช่นนี้คุณจะได้รับบริการที่ดีขึ้นโดยการมองหากรอบการเชื่อมโยงบางประเภทและเพียงแค่ส่งคืนวัตถุ JSON หรือขึ้นอยู่กับแบ็กเอนด์และเทมเพลตของคุณคุณสามารถเปลี่ยนวิธีโหลดสคริปต์ของคุณ

คุณสามารถใช้jQuerygetScript()เพื่อคว้าสคริปต์ที่เกี่ยวข้อง นี่คือซอ, มันเป็นเพียงตัวอย่างโดยตรงของ jQuery, แต่ฉันไม่เห็นคำเตือนใด ๆ ที่ถูกโยนทิ้งเมื่อสคริปต์ถูกโหลดด้วยวิธีนั้น

ตัวอย่าง

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

http://jsfiddle.net/49tkL0qd/

ข้อความเตือนอาจเกิดจากการร้องขอ XMLHttpRequest ภายในเธรดหลักที่มีการตั้งค่าสถานะ async เป็นเท็จ

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

XMLHttpRequest แบบซิงโครนัสนอกคนงานกำลังอยู่ในขั้นตอนการลบออกจากแพลตฟอร์มเว็บเนื่องจากมีผลเสียต่อประสบการณ์ของผู้ใช้ (นี่เป็นกระบวนการที่ใช้เวลานานหลายปี) นักพัฒนาจะต้องไม่ส่งค่าเท็จสำหรับอาร์กิวเมนต์ async เมื่อสภาพแวดล้อมส่วนกลางของ JavaScript เป็นสภาพแวดล้อมของเอกสาร ตัวแทนผู้ใช้ควรได้รับการสนับสนุนอย่างยิ่งให้เตือนเกี่ยวกับการใช้งานดังกล่าวในเครื่องมือของนักพัฒนาและอาจทดลองใช้การโยนข้อยกเว้น InvalidAccessError เมื่อมันเกิดขึ้น

ทิศทางในอนาคตคืออนุญาต XMLHttpRequests ในเธรดผู้ปฏิบัติงานเท่านั้น ข้อความมีไว้เพื่อเป็นคำเตือนถึงผลกระทบนั้น

ฉันกำลังเผชิญปัญหาเดียวกัน แต่สามารถแก้ไขได้โดยใส่ async: จริง ฉันรู้ว่ามันเป็นจริงโดยค่าเริ่มต้น แต่มันทำงานเมื่อฉันเขียนมันอย่างชัดเจน

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

ดีบักเกอร์สดของ Visual Studio 2015/2017 กำลังฉีดรหัสที่มีการโทรที่ไม่รองรับ

บางครั้งมีความจำเป็นที่จะต้อง ajax โหลดสคริปต์ แต่ล่าช้าเอกสารพร้อมจนกว่าหลังจากโหลดสคริปต์แล้ว

jQuery รองรับสิ่งนี้ด้วยholdReady()ฟังก์ชั่น

ตัวอย่างการใช้งาน:

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

โหลดสคริปต์ที่เกิดขึ้นจริงไม่ตรงกัน ( ไม่มีข้อผิดพลาด ) แต่ผลที่ได้คือซิงโครถ้าส่วนที่เหลือของ JavaScript ของคุณทำงานหลังจากเอกสารพร้อม

โดยทั่วไปแล้วคุณสมบัติขั้นสูงนี้จะใช้งานโดยตัวจัดการสคริปต์แบบไดนามิกที่ต้องการโหลด JavaScript เพิ่มเติมเช่นปลั๊กอิน jQuery ก่อนที่จะอนุญาตให้เหตุการณ์พร้อมเกิดขึ้นแม้ว่า DOM อาจพร้อมใช้งาน

เอกสารประกอบ:
https://api.jquery.com/jquery.holdready

อัปเดต 7 มกราคม 2562

จากJQMIGRATE :

jQuery.holdReady () เลิกใช้แล้ว

สาเหตุ:jQuery.holdReady()วิธีการได้รับการคัดค้านเนื่องจากผลกระทบที่มีต่อผลการดำเนินงานทั่วโลกของหน้า วิธีนี้สามารถป้องกันรหัสทั้งหมดในหน้าจากการเริ่มต้นสำหรับระยะเวลานาน

วิธีแก้ไข:เขียนหน้าซ้ำเพื่อไม่ให้ล่าช้าตัวจัดการ jQuery ทั้งหมด สิ่งนี้อาจเกิดขึ้นได้เช่นโดยการโหลดล่าช้าเฉพาะรหัสที่ต้องใช้การหน่วงเวลาเมื่อปลอดภัยในการทำงาน เนื่องจากความซับซ้อนของวิธีการนี้ jQuery Migrate ไม่ได้พยายามเติมฟังก์ชันการทำงาน หากเวอร์ชันพื้นฐานของ jQuery ที่ใช้กับ jQuery Migrate ไม่มีjQuery.holdReady()รหัสอีกต่อไปจะล้มเหลวหลังจากคำเตือนนี้ปรากฏขึ้น

เพื่อหลีกเลี่ยงคำเตือนนี้ห้ามใช้:

async: false

ในการโทร $ .ajax () ใด ๆ ของคุณ นี่เป็นคุณสมบัติเดียวของ XMLHttpRequest ที่เลิกใช้แล้ว

ค่าเริ่มต้นคือ

async: true

jQuery เลิกใช้ XMLHTTPRequest แบบซิงโครนัส

@Webgr คำตอบบางส่วนจริง ๆ แล้วช่วยให้ฉันแก้ปัญหาคำเตือนนี้ @ console log อัปยศในส่วนอื่น ๆ ของคำตอบที่นำ downvotes มากมาย :(

อย่างไรก็ตามนี่คือวิธีที่ฉันค้นพบสาเหตุของคำเตือนนี้ในกรณีของฉัน:

1. ใช้ Chrome เบราว์เซอร์> กด F12 เพื่อนำ DevTools
2. เปิดเมนู drawer (ในจุดแนวตั้งของ Chrome 3 ที่มุมขวาบน)
3. ภายใต้คอนโซล > ตรวจสอบตัวเลือกLog XMLHttpRequests
4. รีโหลดหน้าเว็บของคุณที่ให้ข้อผิดพลาดและสังเกตสิ่งที่เกิดขึ้นกับคำขอ ajax แต่ละรายการในบันทึกของคอนโซล

ในกรณีของฉันปลั๊กอินอื่นกำลังโหลด 2 ไลบรารี่. jsหลังจากการโทร ajax แต่ละครั้งซึ่งไม่จำเป็นหรือไม่จำเป็นเลย การปิดใช้งานปลั๊กอินตัวโกงจะลบคำเตือนออกจากบันทึก จากจุดนั้นคุณสามารถลองแก้ไขปัญหาด้วยตัวคุณเอง (เช่น จำกัด การโหลดสคริปต์ไปยังหน้าเว็บหรือเหตุการณ์บางอย่างซึ่งเป็นวิธีที่เฉพาะเจาะจงมากสำหรับคำตอบที่นี่) หรือติดต่อผู้พัฒนาปลั๊กอินบุคคลที่สามเพื่อแก้ปัญหา

หวังว่านี่จะช่วยใครซักคน

ฉันได้ดูคำตอบที่น่าประทับใจทั้งหมด ฉันคิดว่าเขาควรให้รหัสที่ทำให้เขามีปัญหา รับตัวอย่างด้านล่างหากคุณมีสคริปต์ที่จะเชื่อมโยงไปยัง jquery ใน page.php แล้วคุณจะได้รับการแจ้งเตือนว่า

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

ฉันได้รับคำเตือนดังกล่าวในกรณีต่อไปนี้:

1) file1 <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>ซึ่งประกอบด้วย หน้ามีช่องใส่ ฉันป้อนค่าบางอย่างในฟิลด์อินพุตและคลิกปุ่ม Jquery ส่งอินพุตไปยังไฟล์ php ภายนอก

2) ไฟล์ php ภายนอกยังมี jquery และในไฟล์ php ภายนอก i รวมอยู่<script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>ด้วย เพราะถ้านี่ฉันได้รับคำเตือน

ลบออก<script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>จากไฟล์ php ภายนอกและทำงานโดยไม่มีการเตือน

ตามที่ฉันเข้าใจในการโหลดไฟล์แรก (file1) ฉันโหลดjquery-1.10.2.jsและหน้าไม่โหลดซ้ำ (มันส่งข้อมูลไปยังไฟล์ php ภายนอกโดยใช้ jquery $.post) จากนั้นjquery-1.10.2.jsดำเนินการต่อ ดังนั้นไม่จำเป็นต้องโหลดอีกครั้ง

ฉันได้รับข้อยกเว้นนี้เมื่อฉันตั้งค่า URL ในข้อความค้นหาเช่น "example.com/files/text.txt" ฉันเปลี่ยน URL เป็น " http://example.com/files/text.txt " และข้อยกเว้นนี้หายไป

และฉันได้รับข้อยกเว้นนี้สำหรับการรวมสคริปต์ can.js หนึ่งรายการในอีกสคริปต์หนึ่งเช่น

{{>anotherScript}}

ในแอปพลิเคชัน MVC ฉันได้รับคำเตือนนี้เพราะฉันเปิด Kendo Window ด้วยวิธีการที่ส่งคืนมุมมอง () แทนที่จะเป็น PartialView () มุมมอง () กำลังพยายามเรียกคืนสคริปต์ทั้งหมดของหน้าเว็บอีกครั้ง

มันเกิดขึ้นกับฉันใน ZF2 ฉันพยายามโหลดเนื้อหา Modal แต่ฉันลืมปิดการใช้งานเค้าโครงก่อน

ดังนั้น:

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

เช่น @Nycen ฉันได้รับข้อผิดพลาดนี้เนื่องจากมีลิงก์ไปยัง Cloudfare Mine เป็นของปลั๊กอินSelect2

เพื่อแก้ไขฉันเพิ่งลบ

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

และข้อผิดพลาดก็หายไป

1. ใน Chrome press F12
2. Develomping Tools-> F1กด
3. ดู settings-> general-> Apperance: "Don't show chrome Data Saver warning"- ตั้งค่าเช็คบ๊อกซ์นี้
4. ดู settings-> General-> Console: "Log XMLHTTPRequest"- ตั้งค่าเช็คบ็อกซ์นี้ด้วย

สนุก

นี่แก้ไขได้ในกรณีของฉัน

JS

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

คำตอบนี้ถูกแทรกในลิงค์นี้

/programming/28322636/synchronous-xmlhttprequest-warning-and-script

ในกรณีของฉันนี้เกิดจากสคริปต์ยืดหยุ่นซึ่งเป็นส่วนหนึ่งของแอพ "CDNJS Selections" ที่นำเสนอโดยCloudflare Cloudflare

ตาม Cloudflare "แอพนี้เลิกใช้ในเดือนมีนาคม 2558" ฉันปิดและข้อความหายไปทันที

คุณสามารถเข้าถึงแอพได้โดยไปที่https://www.cloudflare.com/a/cloudflare-apps/yourdomain.com

หมายเหตุ: นี่เป็นสำเนาคำตอบของฉันในหัวข้อนี้ คำเตือนแบบซิงโครนัส XMLHttpRequest และ <script> (ฉันเข้าชมทั้งสองเมื่อค้นหาวิธีแก้ไข)

ฉันแก้ไขสิ่งนี้ด้วยขั้นตอนด้านล่าง:

1. ตรวจสอบสคริปต์ CDN ของคุณและเพิ่มในเครื่อง
2. ย้ายสคริปต์ของคุณรวมไว้ในส่วนหัว

ในกรณีของฉันโดยเฉพาะฉันทำการเรนเดอร์ Rails บางส่วนโดยrender layout: falseที่ไม่มีการเรนเดอร์โครงร่างทั้งหมดรวมถึงสคริปต์ทั้งหมดใน<head>แท็ก การเพิ่มrender layout: falseไปยังแอ็คชันคอนโทรลเลอร์แก้ไขปัญหาได้

สำหรับฉันปัญหาคือว่าในคำขอ OK ฉันคาดหวังว่าการตอบสนอง ajax จะเป็นสตริง HTML ในรูปแบบที่ดีเช่นตาราง แต่ในกรณีนี้เซิร์ฟเวอร์ประสบปัญหากับคำขอเปลี่ยนเส้นทางไปยังหน้าแสดงข้อผิดพลาด และดังนั้นจึงส่งคืนรหัส HTML ของหน้าข้อผิดพลาด (ซึ่งมี<scriptแท็กที่ไหนสักแห่งฉันคอนโซลบันทึกคำตอบ ajax และนั่นคือเมื่อฉันรู้ว่ามันไม่ใช่สิ่งที่ฉันคาดหวังจากนั้นทำการดีบักต่อ

คำถามที่เกิดขึ้นในปี 2014 และเป็นปี 2019 ดังนั้นฉันเดาว่ามันดีที่จะมองหาตัวเลือกที่ดีกว่า

คุณสามารถใช้fetchAPI ใน Javascript ซึ่งให้ความยืดหยุ่นมากกว่า

ตัวอย่างเช่นดูรหัสนี้

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