การโต้ตอบของหน้าเว็บมีความซับซ้อนมากขึ้นเรื่อย ๆ และ JavaScript ก็กลายเป็นปฏิบัติการแบบอะซิงโครนัสมากขึ้นเรื่อย ๆ ตัวอย่างเช่นคำขอ AJAX ทั่วไปต้องการการตอบสนองต่อการดำเนินการเมื่อคำขอเสร็จสมบูรณ์ คำขอมักจะอะซิงโครนัส ในระหว่างกระบวนการร้องขอผู้ใช้สามารถดำเนินการอื่นโดยไม่ต้องปิดกั้นหน้า เอฟเฟกต์การโต้ตอบแบบอะซิงโครนัสนี้ค่อนข้างเป็นมิตรกับผู้ใช้ แต่สำหรับนักพัฒนามันเป็นเรื่องที่ไม่เป็นมิตรมากที่จะจัดการกับการดำเนินงานประเภทนี้ในปริมาณมาก การดำเนินการที่เสร็จสมบูรณ์โดยคำขอแบบอะซิงโครนัสจะต้องกำหนดไว้ล่วงหน้าในฟังก์ชั่นการโทรกลับและฟังก์ชั่นนี้จะต้องเรียกหลังจากคำขอเสร็จสมบูรณ์ วิธีการเขียนโปรแกรมแบบอะซิงโครนัสแบบไม่เชิงเส้นนี้จะทำให้นักพัฒนาอึดอัดและยังนำมาซึ่งความไม่สะดวกมากมายเพิ่มการมีเพศสัมพันธ์และความซับซ้อนของรหัสและการจัดระเบียบของรหัสจะไม่ได้รับการคัดค้านมากลดความสามารถในการบำรุงรักษาของรหัส สถานการณ์มีความซับซ้อนมากขึ้น หากการดำเนินการต้องรอจนกว่าคำขอ AJAX แบบอะซิงโครนัสหลายครั้งจะเสร็จสมบูรณ์ก่อนที่จะสามารถดำเนินการได้ฟังก์ชั่นการโทรกลับจะซ้อนกัน หากหลายเลเยอร์ต้องซ้อนกันคุณสามารถขอพรได้เท่านั้น
มาดูฟังก์ชั่นอะซิงโครนัสทั่วไปต่อไปนี้
การคัดลอกรหัสมีดังนี้:
var showmsg = function () {
settimeout (function () {
การแจ้งเตือน ('สวัสดี');
}, 5000);
-
โดยปกติจะทำถ้าคุณต้องการเพิ่มการโทรกลับไปยังฟังก์ชั่น
การคัดลอกรหัสมีดังนี้:
var showmsg = function (callback) {
settimeout (function () {
การแจ้งเตือน ('สวัสดี');
// เพิ่มการโทรกลับที่นี่
การโทรกลับ ();
}, 5000);
-
หากคุณใช้ Easy.js Promise วิธีการเพิ่มการเรียกกลับจะมีความสง่างามมากขึ้นตราบใดที่คุณต้องการห่อหุ้มฟังก์ชั่นดั้งเดิมลงในอินสแตนซ์สัญญา
การคัดลอกรหัสมีดังนี้:
var showmsg = function () {
// สร้างอินสแตนซ์สัญญา
var promise = new e.promise ();
settimeout (function () {
การแจ้งเตือน ('สวัสดี');
// เปลี่ยนสถานะของสัญญา
Promise.resolve ('เสร็จ');
}, 5000);
// กลับไปที่อินสแตนซ์สัญญา
สัญญากลับมา;
-
มี 3 ขั้นตอนสำคัญในการห่อหุ้มฟังก์ชั่นธรรมดาลงในอินสแตนซ์สัญญา ขั้นตอนแรกคือการสร้างอินสแตนซ์สัญญาภายในฟังก์ชั่น ขั้นตอนที่สองคือการเปลี่ยนสถานะของสัญญาที่จะแล้วเสร็จหลังจากฟังก์ชั่นการปรับใช้ ขั้นตอนที่สามคือการส่งคืนอินสแตนซ์สัญญานี้ แต่ละอินสแตนซ์สัญญามี 3 รัฐคือรอดำเนินการ (ยังไม่เสร็จสมบูรณ์), แก้ไข (เสร็จสมบูรณ์, ประสบความสำเร็จ) และปฏิเสธ (ปฏิเสธล้มเหลว) มาดูวิธีเพิ่มการโทรกลับ
การคัดลอกรหัสมีดังนี้:
showmsg (). จากนั้น (ฟังก์ชั่น (str) {
// การโทรกลับถูกเพิ่มที่นี่
การโทรกลับ (STR);
-
สิ่งนี้จะแยกฟังก์ชั่นการโทรกลับออกจากฟังก์ชั่นอะซิงโครนัสดั้งเดิมและจากมุมมองของการจัดระเบียบรหัสมันมีความสง่างามมากขึ้น Resolve ยอมรับพารามิเตอร์ที่สามารถถ่ายโอนข้อมูลไปยังการโทรกลับโดยใช้วิธีนี้ได้อย่างง่ายดาย
สำหรับคำขอ AJAX Easy.js จะห่อหุ้มวิธี AJAX ลงในวัตถุสัญญาโดยตรงและคุณสามารถเพิ่มวิธีการโทรกลับได้โดยตรง
การคัดลอกรหัสมีดังนี้:
e.ajax ({
URL: 'test1.php',
ประเภท: 'รับ'
-
. แล้ว (ฟังก์ชั่น () {
// เพิ่มการโทรกลับพร้อมคำขอที่ประสบความสำเร็จ
}, การทำงาน(){
// เพิ่มการโทรกลับที่คำขอล้มเหลว
-
วิธีการนั้นยอมรับ 2 ฟังก์ชั่นเป็นพารามิเตอร์ ฟังก์ชั่นแรกคือการโทรกลับที่เสร็จสมบูรณ์และครั้งที่สองคือการโทรกลับที่ล้มเหลว
จะเกิดอะไรขึ้นถ้ามีคำขอ AJAX หลายรายการที่กล่าวถึงข้างต้น? จากนั้นคุณต้องใช้วิธีการเมื่อ วิธีนี้สามารถยอมรับอินสแตนซ์สัญญาหลายรายการเป็นพารามิเตอร์
การคัดลอกรหัสมีดังนี้:
คำขอ var = e.when (e.ajax ({
URL: 'test1.php',
ประเภท: 'รับ'
}), e.ajax ({
URL: 'test2.php'
ประเภท: 'รับ'
-
requests.then (ฟังก์ชั่น (arg1, arg2) {
console.log ('ความสำเร็จ:' + arg1 [0] + arg2 [0]);
}, ฟังก์ชัน (arg1, arg2) {
console.log ('ความล้มเหลว:' + arg1 + arg2);
-
วิธีการที่จะจัดเก็บอินสแตนซ์สัญญาหลายรายการไว้ในอาร์เรย์และรอจนกว่าอินสแตนซ์สัญญาทั้งหมดของอาร์เรย์จะเสร็จสมบูรณ์ก่อนที่จะดำเนินการโทรกลับที่เสร็จสมบูรณ์ เมื่ออินสแตนซ์ถูกปฏิเสธการโทรกลับที่ถูกปฏิเสธจะถูกดำเนินการทันที
รูปแบบสัญญาเป็นหนึ่งในข้อกำหนดของ CommonJs ไลบรารี JavaScript หลักจำนวนมากมีการใช้งานที่สอดคล้องกันเช่น JQuery และ Dojo ซึ่งรอการตัดบัญชีใช้ฟังก์ชั่นเหล่านี้ ที่นี่ฉันยังต้องการบ่นเกี่ยวกับการรอการตัดบัญชีของ JQuery การละทิ้งการใช้งานภายในนี้ควรเป็นโมดูลที่มีอัตราการใช้งานผู้ใช้ต่ำสุดซึ่งมีความสัมพันธ์บางอย่างกับวิธีการใช้งานที่ซับซ้อนมากขึ้น