งานของฉันง่ายขึ้นเล็กน้อยเมื่อเร็ว ๆ นี้ ฉันจำคำว่าคำว่าที่ฉันเคยเห็นมาก่อนดังนั้นฉันจึงลงไปเรียนอย่างอดทน
1: สัญญาคืออะไร? ทำไมสิ่งนี้ถึงมี?
ก่อนอื่นสัญญาถูกสร้างขึ้นเพื่อแก้ปัญหาการเขียนโค้ดในระหว่างการเขียนโปรแกรมแบบอะซิงโครนัสของ JavaScript
ด้วยการพัฒนาของ JavaScript มีสถานการณ์แบบอะซิงโครนัสมากขึ้นเรื่อย ๆ ส่วนหน้ามี Ajax, settimeout ฯลฯ และโหนดแบ็กเอนด์เป็นแบบอะซิงโครนัส ตามการปฏิบัติแบบดั้งเดิมมันคือการฝังการโทรกลับในการโทรกลับต่างๆ รหัสสามารถทำให้คนเวียนหัว
ในเวลานี้ชุมชน CommonJS เสนอข้อกำหนดที่เรียกว่า Promise/A+ซึ่งกำหนดวิธีการเขียนรหัสแบบอะซิงโครนัสรวมถึงการใช้เวลา/จากนั้น/แก้ไข ฯลฯ เพื่อจัดระเบียบรหัสอะซิงโครนัส
เนื่องจากข้อกำหนดนี้มีความสง่างามมากหลายคนได้ใช้ข้อมูลจำเพาะนี้ต่อไปอีกรวมถึงสัญญาสนับสนุนของเบราว์เซอร์ (), รอการตัดบัญชีใน jQuery, เมื่อ. js, ฯลฯ
เนื่องจากห้องสมุดเหล่านี้มีคุณสมบัติตรงตามข้อกำหนดนี้เพียงเรียนรู้ ฉันเรียนรู้การรอการตัดบัญชีของ jQuery เป็นหลักดังนั้นบทความนี้ส่วนใหญ่พูดถึงการดำเนินการนี้
สอง: รอการตัดบัญชีของ jQuery
ก่อนอื่นเกี่ยวกับวัตถุรอการตัดบัญชีนาย Ruan Yifeng เขียนบทความอย่างละเอียดโปรดคลิกที่นี่ ขอแนะนำให้คุณอ่านบทความของเขาก่อนแล้วอ่านต่อ
ดังที่ได้กล่าวไว้ข้างต้นสัญญาได้รับการออกแบบมาเพื่อแก้ปัญหาแบบอะซิงโครนัส (เช่น AJAX) ดังนั้นให้เปรียบเทียบความแตกต่างของพวกเขา
JQuery Ajax คลาสสิกเขียนเป็น
การคัดลอกรหัสมีดังนี้:
$ .ajax ({
ประเภท: "รับ",
URL: "",
ความสำเร็จ: function () {}
ข้อผิดพลาด; การทำงาน () {}
-
พารามิเตอร์ความสำเร็จและข้อผิดพลาดคือฟังก์ชั่นการโทรกลับเมื่อความสำเร็จ/ความล้มเหลว
ตอนนี้วิธีการเขียน Ajax ของ JQuery ได้กลายเป็น
การคัดลอกรหัสมีดังนี้:
$ .ajax ({
พิมพ์; "รับ",
URL: ""
}). ทำ (ฟังก์ชัน () {}). ล้มเหลว (ฟังก์ชัน () {});
หลังจากประสบความสำเร็จฟังก์ชั่นใน DONE จะถูกเรียกและหากมีการเรียกฟังก์ชั่นในความล้มเหลวฟังก์ชันในความล้มเหลวจะถูกเรียก
หลังจากเห็นสิ่งนี้คุณอาจมีคำถามแล้ววิธีการเหล่านี้จะทำวัตถุใด/ล้มเหลว? $ .ajax () ส่งคืนวัตถุอะไรและทำไมจึงมีสองวิธีนี้?
คำตอบอยู่ในวัตถุรอการตัดบัญชีด้านล่าง
jQuery ให้การรอการตัดบัญชีประเภทใหม่ สร้างด้วย $ .deferred () ตัวอย่างเช่น
การคัดลอกรหัสมีดังนี้:
var def = $ .deferred ();
def นี้สืบทอดวิธีการมากมายรวมถึง Done/Fail/Resolve/ปฏิเสธ ฯลฯ
ดังนั้นที่นี่เรารู้ว่า $ .ajax () ข้างต้นส่งคืนวัตถุนี้จริง
มีวิธีการมากมายสำหรับวัตถุรอการตัดบัญชี นี่คือหลายคนที่ใช้กันทั่วไป สำหรับข้อมูลเพิ่มเติมโปรดดู API
สิ่งแรกคือการสร้างวัตถุ DEF ตามธรรมชาติ มีหลายวิธีที่นี่เช่น:
การคัดลอกรหัสมีดังนี้:
var def = $ .deferred (); // สร้างมันเอง
$ .ajax ({}); // เมธอด ajax ส่งคืนยังเป็นวัตถุ def
$. เมื่อ (); // เมื่อวิธีการจะส่งคืนวัตถุ def ด้วย
ที่นี่ $. เมื่อ () สามารถพูดคุยกันได้ วิธีนี้มักจะได้รับวัตถุรอการตัดบัญชีอย่างน้อยหนึ่งรายการจากนั้นกำหนดสถานะของวัตถุที่ส่งคืนด้วย $. เมื่อ () ตามสถานะของวัตถุที่รอการตัดบัญชีเหล่านี้ หนึ่งในสถานการณ์การใช้งานคือคำขอ AJAX หลายครั้ง หากหนึ่งในนั้นล้มเหลวก็ถือว่าเป็นความล้มเหลว จากนั้นคุณสามารถผ่านวิธี Ajax หลายวิธีลงใน $. เมื่อ () เช่น $. เมื่อ ($. ajax (), $ .ajax ()) จากนั้น $. เมื่อจะส่งคืนวัตถุ def (ตัดสินตามผลลัพธ์ของคำขอทั้งสองนี้)
จากนั้นคุณจะได้รับวัตถุ DEF และมีชุดของวิธีการเปลี่ยนสถานะของวัตถุนี้
การคัดลอกรหัสมีดังนี้:
def.resolve (); // ตั้งค่าวัตถุ DEF ให้เสร็จสมบูรณ์จากนั้นฟังก์ชั่นที่ถูกผูกไว้กับ def.done () จะถูกดำเนินการทันที
def.reject (); // ตั้งค่าวัตถุ DEF ให้ล้มเหลวจากนั้นฟังก์ชั่นที่ถูกผูกไว้กับ def.fail () จะถูกดำเนินการทันที
def.notify (); // ในระหว่างการดำเนินการของวัตถุ def การเรียกกลับที่สอดคล้องกันคือ def.progress ()
ถัดไปคือวิธีการตั้งค่าการโทรกลับคำสั่งซื้อสอดคล้องกับข้างต้นนั่นคือสถานะใดที่จะเรียกร้องให้โทรกลับ
การคัดลอกรหัสมีดังนี้:
def.done (); // สอดคล้องกับ def.resolve ();
def.fail (); // สอดคล้องกับ def.reject ();
def.progress (); // สอดคล้องกับ def.Notify ();
// พิเศษ
def.always (); // เรียกว่าประสบความสำเร็จหรือล้มเหลว
def. จากนั้น (); // ยอมรับหลายฟังก์ชั่นตามลำดับความสำเร็จความล้มเหลวและความคืบหน้า
ในความเป็นจริง ณ จุดนี้การใช้วัตถุที่รอการตัดบัญชีเกือบจะเหมือนกัน อย่างไรก็ตาม jQuery ยังมี API หลายแห่ง
การคัดลอกรหัสมีดังนี้:
// ตรวจสอบคลาสสถานะปัจจุบัน
def.isrejected ();
def.isresolved ();
def.state ();
ตามชื่อแนะนำ API เหล่านี้จะไม่ถูกกล่าวถึงในรายละเอียด สำหรับรายละเอียดคุณสามารถตรวจสอบเอกสาร jQuery API ที่ระบุไว้ด้านบน
มีวิธีอื่นซึ่งบางครั้งเราต้องการให้วัตถุ DEF ภายนอกจากนั้นวัตถุนี้สามารถตั้งค่าการเรียกกลับสำหรับสถานะต่างๆ แต่ไม่สามารถเปลี่ยนสถานะได้ดังนั้นเราจึงสามารถใช้งานได้
การคัดลอกรหัสมีดังนี้:
def.promise ();
ส่งคืนวัตถุ Promisee ซึ่งเป็นชุดย่อยของวัตถุรอการตัดบัญชี คุณสามารถใช้เสร็จแล้ว/ล้มเหลวและวิธีการอื่น ๆ โดยไม่ต้องแก้ไข/ปฏิเสธและวิธีการอื่น ๆ ส่วนใหญ่เป็นการป้องกันสถานะของวัตถุ DEF จากการถูกแก้ไขจากภายนอก
ณ จุดนี้สัญญาทั้งหมดได้รับการหารือ ตอนนี้คุณสามารถใช้พวกเขาในโครงการของคุณ นอกจากนี้ฉันขอให้คุณมีความสุขในช่วงปีแรก ๆ ฉันขอให้คุณมีความสุขตลอดปีของแกะ ^^