1.1 ฟังก์ชั่นการโทรกลับ
ฟังก์ชั่นการโทรกลับ: ส่งผ่านฟังก์ชัน A เป็นพารามิเตอร์เพื่อเรียกใช้ฟังก์ชัน B อื่น จากนั้น A คือฟังก์ชันโทรกลับ [แนะนำ: วิดีโอสอน JavaScript]
ตัวอย่างบางส่วนชื่อการโทรกลับ
function คุณมีสุนัขกี่ตัว(fn){
fn('สุนัข')
}ฟังก์ชันนับสุนัข(หมายเลข){
console.log(ปริมาณ)
-
มีหมากี่ตัว (นับหมา) // หมาหนึ่งตัวโทรกลับโดยไม่ระบุชื่อ
function คุณมีสุนัขกี่ตัว(fn){
fn('สุนัข')
-
คุณมีสุนัขกี่ตัว (function(number){console.log(number)
}) // สุนัข ตัวอย่างทั่วไป
ฟังก์ชั่นการโทรกลับถูกใช้ใน jQuery และใช้การโทรกลับแบบไม่ระบุชื่อที่นี่
$("#btn").คลิก(ฟังก์ชั่น(){
console.log('คลิกที่ฉัน')
-1.2 Callback Hell (ข้อเสียของการโทรกลับ 1)
Callback Hell: หมายถึงสถานการณ์ที่มีการซ้อน Callback มากเกินไป ทำให้โค้ดเข้าใจยาก
ให้ข้อมูล = []ฟังก์ชั่น คุณมีสุนัขกี่ตัว (fn){
fn('สุนัข')
}function คุณมีแมวกี่ตัว(fn){
fn('แมว')
}ฟังก์ชันรู้ (ปริมาณ, โทรกลับ){
info.push (ปริมาณ)
console.log (ข้อมูล) ถ้า (โทรกลับ) {
โทรกลับ()
-
}//เริ่มการโทร หากมีเลเยอร์มากกว่านี้ 2-3 ชั้น จะเป็นการยากที่จะเข้าใจว่าคุณมีสุนัขกี่ตัว (ฟังก์ชั่น(จำนวนสุนัข){
console.log(จำนวนสุนัข)
เข้าใจแล้ว(จำนวนสุนัข, function(){
คุณมีแมวกี่ตัว(ฟังก์ชั่น(จำนวนแมว){
console.log(จำนวนแมว)
ได้เลย (จำนวนแมว)
-
-
-1.3 วิธีแก้ปัญหาโดยไม่ใช้ Promise
ใช้ฟังก์ชันที่มีชื่อแทนฟังก์ชันที่ไม่ระบุชื่อ
ให้ข้อมูล = []ฟังก์ชั่น คุณมีสุนัขกี่ตัว (fn){
fn('สุนัข')
}function คุณมีแมวกี่ตัว(fn){
fn('แมว')
}ฟังก์ชันรู้ (ปริมาณ, โทรกลับ){
info.push (ปริมาณ)
console.log (ข้อมูล) ถ้า (โทรกลับ) {
โทรกลับ()
-
}ฟังก์ชั่นบอกจำนวนแมว (จำนวนแมว){
console.log(จำนวนแมว)
ได้เลย (จำนวนแมว)
}ฟังก์ชันนับต่อไป(){
คุณมีแมวกี่ตัว (บอกจำนวนแมว)
}ฟังก์ชั่นบอกจำนวนสุนัข (จำนวนสุนัข){
console.log(จำนวนสุนัข)
ได้เลย (จำนวนหมานับเรื่อยๆ)
-
มีหมากี่ตัว (บอกจำนวนหมาด้วย) // ดูเหมือนจะไม่ดีขึ้นเท่าไหร่ - -1.4 วิธีการโทรกลับแตกต่างกันและต้องจำแยกกัน (ข้อเสียในการโทรกลับ 2)
readFile ('C:\1.txt', ฟังก์ชั่น (ข้อผิดพลาด, ข้อมูล) { // โทรกลับใน node.js อ่านวิธีไฟล์ถ้า (ข้อผิดพลาด) {
console.log('ความสำเร็จ')
console.log(data.toString())
} อื่น {
console.log('ไม่สามารถอ่านไฟล์ได้')
-
-
$.ajax({ //Callback url:'/2.txt' ในวิธี ajax ใน jQuery
ความสำเร็จ: ฟังก์ชั่น (ตอบสนอง) {
console.log('ความสำเร็จ')
-
ข้อผิดพลาด: ฟังก์ชั่น () {
console.log('ล้มเหลว')
-
-Promises เป็นโซลูชันสำหรับการเขียนโปรแกรมแบบอะซิงโครนัสที่สมเหตุสมผลและมีประสิทธิภาพมากกว่าโซลูชันแบบเดิม - การเรียกกลับและเหตุการณ์ ได้รับการเสนอและนำไปใช้ครั้งแรกโดยชุมชน ES6 เขียนลงในมาตรฐานภาษา รวมการใช้งาน และจัดเตรียมออบเจ็กต์ Promise
3.1 หลักการปฏิบัติ
ES6 กำหนดว่าวัตถุ Promise เป็นตัวสร้างที่ใช้ในการสร้างอินสแตนซ์ Promise ด้วยการส่งคืนอินสแตนซ์ของวัตถุ Promise ภายในฟังก์ชัน คุณจะสามารถใช้คุณสมบัติและวิธีการของ Promise สำหรับขั้นตอนต่อไปได้
ฟังก์ชั่น ชื่อฟังก์ชั่น () { คืนสัญญาใหม่ (ฟังก์ชั่น (แก้ไข, ปฏิเสธ) {
// ... โค้ดบางส่วนถ้า (/* การดำเนินการแบบอะซิงโครนัสสำเร็จ */){
แก้ไข (ค่า); // ถูกเรียกเมื่อการดำเนินการแบบอะซิงโครนัสสำเร็จและส่งผลลัพธ์เป็นพารามิเตอร์ } else {
ปฏิเสธ (ข้อผิดพลาด); // ถูกเรียกเมื่อเกิดความล้มเหลวแบบอะซิงโครนัส โดยส่งข้อผิดพลาดเป็นพารามิเตอร์ }
-
-3.2 ตรรกะการโทร
ทั้ง S1 และ E1 ไม่ได้รายงานข้อผิดพลาด ดำเนินการ S2 (แก้ไขการดำเนินการ ระบบคิดว่าเสร็จสิ้นแล้ว และไม่มีการรายงานข้อผิดพลาด)
หาก S1 หรือ E1 รายงานข้อผิดพลาด ให้ดำเนินการ E2 (ปฏิเสธการดำเนินการ ระบบคิดว่ายังไม่เสร็จสิ้น และรายงานข้อผิดพลาด)
การเข้าสู่ Front-end (vue) สู่หลักสูตรการเรียนรู้: เข้าสู่การเรียนรู้
4.1 คุณสมบัติและวิธีการของสัญญา
คุณสมบัติ
Promise.prototype แสดงถึงวิธีการต้นแบบของตัวสร้าง Promise
สัญญา.prototype.แล้ว()
กลับสัญญา. ต้องมีพารามิเตอร์ไม่เกินสองตัว: ฟังก์ชันการเรียกกลับความสำเร็จและความล้มเหลวของ Promise
สัญญา.prototype.catch()
คืนคำสัญญาและจัดการกับการปฏิเสธ เทียบเท่ากับ Promise.prototype.then (ไม่ได้กำหนด, onRejected)
สัญญา.prototype.finally()
ในที่สุด () วิธีการส่งคืนสัญญา หลังจากดำเนินการแล้ว () และ catch () ฟังก์ชันการโทรกลับที่ระบุโดยในที่สุดจะถูกดำเนินการ หลีกเลี่ยงสถานการณ์ที่ต้องเขียนคำสั่งเดียวกันครั้งเดียวใน then() และ catch()
Promise.all (ทำซ้ำได้)
ส่งคืนอินสแตนซ์ Promise หลังจากที่สัญญาทั้งหมดในพารามิเตอร์ที่ทำซ้ำได้ได้รับการแก้ไขแล้ว การโทรกลับจะเสร็จสิ้นการแก้ไข
Promise.race (ทำซ้ำได้)
ส่งกลับสัญญา พร้อมด้วยค่าตอบแทนของวัตถุสัญญาหรือเหตุผลข้อผิดพลาดในการปฏิเสธ ตราบใดที่มีวัตถุสัญญาในการวนซ้ำที่ "แก้ไข" หรือ "ปฏิเสธ"
สัญญาแก้ไข()
ส่งกลับวัตถุ Promise ที่แก้ไขด้วยค่าที่กำหนด แต่ถ้าค่านี้เป็นค่านั้น (นั่นคือ ด้วยเมธอด then) สัญญาที่ส่งคืนจะ "ติดตาม" อ็อบเจ็กต์นั้นและนำสถานะสุดท้ายมาใช้ (หมายถึงแก้ไขแล้ว/ปฏิเสธ/รอดำเนินการ/ชำระบัญชี) หากค่าที่เข้ามานั้นเอง วัตถุสัญญา จากนั้นวัตถุจะถูกส่งกลับเป็นค่าที่ส่งคืนของเมธอด Promise.resolve มิฉะนั้น วัตถุสัญญาจะถูกส่งกลับพร้อมค่านี้เป็นสถานะความสำเร็จ
สัญญา.ปฏิเสธ()
ส่งกลับออบเจ็กต์ Promise พร้อมด้วยพารามิเตอร์เหตุผลสำหรับการปฏิเสธ
4.2 เขียนตัวอย่างใหม่ใน callback hell ลงในแบบฟอร์ม Promise
คุณจะเห็นว่าหลังจากใช้ Promise แล้ว ตรรกะจะใช้งานง่ายและเขียนได้สมบูรณ์ยิ่งขึ้น
เมื่อ Promise ซ้อนอยู่ใน Promise นั่นคือเมื่อ Promise ถูกโยง - ให้ใส่ใจกับความล้มเหลวของการส่งข้อมูล เมื่อเราใช้ Promise chain หากแต่ละขั้นตอนต้องการข้อมูลจากขั้นตอนก่อนหน้า พารามิเตอร์จะต้องผ่านการแก้ไขสำเร็จ . พารามิเตอร์ หากล้มเหลว ให้ส่งผ่านพารามิเตอร์ผ่านการปฏิเสธ หากคุณลืมส่งพารามิเตอร์ คุณจะไม่ได้ผลลัพธ์ที่ต้องการ
แก้ไขจะส่งคืนข้อมูลที่สำเร็จไปยังการโทรกลับครั้งถัดไป
ปฏิเสธการส่งคืนข้อมูลที่ล้มเหลวไปยังการโทรกลับครั้งถัดไป
ส่งพารามิเตอร์เพื่อแก้ไขที่นี่และเปลี่ยนเป็นตัวอย่างของความล้มเหลว ห้ามส่งพารามิเตอร์เพื่อปฏิเสธก่อน หากล้มเหลว การโทรกลับครั้งถัดไปจะไม่ได้รับข้อมูล
ส่งพารามิเตอร์ที่จะปฏิเสธ
เราจะเห็นได้ว่าแม้ว่าจะผ่านการเรียกกลับที่ล้มเหลว แต่การเรียกกลับที่สำเร็จครั้งถัดไปจะยังคงดำเนินการอยู่ เนื่องจากไม่ทราบ () ส่งคืนโดยไม่ได้กำหนดไว้ตามค่าเริ่มต้น จึงเทียบเท่ากับความล้มเหลวที่ได้รับการประมวลผล เมื่อประมวลผลทั้งสำเร็จและล้มเหลว การโทรกลับครั้งต่อไปจะถูกนำมาใช้
เปลี่ยนเป็นสิ่งที่คาดหวังคือจะไม่ถูกเรียกหากล้มเหลว
แบบย่อ การไม่เรียกความล้มเหลว
หลังจากดำเนินการตามสถานการณ์ข้างต้นแล้ว การโทรกลับที่สำเร็จใน .then (ยกเว้นสุนัข) จะไม่ถูกดำเนินการ ลองเพิ่มการโทรกลับที่ล้มเหลวเพื่อดู
คุณยังสามารถคืนการแก้ไขเพื่อให้สามารถดำเนินการโทรกลับที่สำเร็จในภายหลังได้
4.3 การสมัคร
การโหลดรูปภาพจะเขียนการโหลดรูปภาพเป็นสัญญา เมื่อการโหลดเสร็จสิ้น สถานะของสัญญาจะเปลี่ยนไป
const preloadImage = ฟังก์ชั่น (เส้นทาง) {
คืนสัญญาใหม่ (ฟังก์ชั่น (แก้ไข, ปฏิเสธ) {
const image = รูปภาพใหม่ ();
image.onload = แก้ไข;
image.onerror = ปฏิเสธ;
image.src = เส้นทาง;
-
-การรวมกันของฟังก์ชัน Generator และ Promise (สำหรับรายละเอียด ดูลิงก์อ้างอิง บทช่วยสอนของ Ruan Yifeng)
5.1 รอครับ
กรณีที่ประสบความสำเร็จ 
ใช้ try catch ในกรณีที่เกิดความล้มเหลว
ใช้ await กับ try catch ซึ่งจะสมบูรณ์กว่า
วัตถุสัญญาสามารถใช้เพื่อเปลี่ยนฟังก์ชั่นธรรมดาเป็นรูปแบบการคืนสัญญาเพื่อแก้ปัญหานรกเรียกกลับ
ทำความเข้าใจตรรกะการเรียกความสำเร็จและความล้มเหลวของ Promise และสามารถปรับได้อย่างยืดหยุ่น
ทำความเข้าใจความรู้หลัก ใช้ก่อน แล้วค่อยๆ บูรณาการและซึมซับความรู้
ข้างต้นเป็นเนื้อหาโดยละเอียดของการวิเคราะห์ตัวอย่างหลักการและการใช้ ES6 Promise!
