مثال لتحليل المبادئ وإرشادات الاستخدام لـ ES6 Promise

1. قبل الوعد

1.1 وظيفة رد الاتصال

وظيفة رد الاتصال: قم بتمرير الوظيفة A كمعلمة لاستدعاء وظيفة أخرى B، ثم A هي وظيفة رد الاتصال. [مستحسن: فيديو تعليمي لجافا سكريبت]

بعض الأمثلة تسمى عمليات الاسترجاعات

 وظيفة كم عدد الكلاب لديك (fn) {
الجبهة الوطنية ("كلب")
}وظيفة عدد الكلاب(العدد){
console.log(الكمية)
}
كم عدد الكلاب لديك (عد الكلاب) // كلب واحد

رد اتصال مجهول

 وظيفة كم عدد الكلاب لديك (fn) {
الجبهة الوطنية ("كلب")
}
كم عدد الكلاب لديك (الوظيفة(الرقم){console.log(number)
}) // كلب

أمثلة شائعة
يتم استخدام وظائف رد الاتصال في jQuery، ويتم استخدام عمليات رد الاتصال المجهولة هنا.

 $("#btn").انقر(وظيفة(){
console.log ("انقر علي")
})

1.2 جحيم رد الاتصال (عيب رد الاتصال 1)

جحيم رد الاتصال: يشير إلى الحالة التي تكون فيها عمليات رد الاتصال متداخلة أكثر من اللازم، مما يجعل من الصعب فهم التعليمات البرمجية.

 دع المعلومات = []وظيفة كم عدد الكلاب لديك(fn){
الجبهة الوطنية ("كلب")
}وظيفة كم عدد القطط لديك(fn){
الجبهة الوطنية ('قطة')
}الوظيفة تعرف (الكمية، رد الاتصال) {
معلومات.دفع ​​(الكمية)
console.log(معلومات) إذا(رد الاتصال){
أتصل مرة أخرى()
}
}// ابدأ الاتصال، إذا كان هناك بضع طبقات أكثر من هذه، فسيكون من الصعب فهم عدد الكلاب لديك (function(number of dog){
console.log(عدد الكلاب)
فهمت (عدد الكلاب، الوظيفة (){
كم عدد القطط لديك(الوظيفة(عدد القطط){
console.log(عدد القطط)
فهمت (عدد القطط)
})
})
})

1.3 كيفية حل المشكلة دون استخدام Promise

استخدم الوظائف المسماة بدلاً من الوظائف المجهولة

 دع المعلومات = []وظيفة كم عدد الكلاب لديك(fn){
الجبهة الوطنية ("كلب")
}وظيفة كم عدد القطط لديك(fn){
الجبهة الوطنية ('قطة')
}الوظيفة تعرف (الكمية، رد الاتصال) {
معلومات.دفع ​​(الكمية)
console.log(معلومات) إذا(رد الاتصال){
أتصل مرة أخرى()
}
}تخبرك الوظيفة بعدد القطط (عدد القطط){
console.log(عدد القطط)
فهمت (عدد القطط)
}وظيفة مواصلة العد(){
كم عدد القطط لديك (أخبرك بعدد القطط)
}تخبرك الوظيفة بعدد الكلاب (عدد الكلاب){
console.log(عدد الكلاب)
حسنًا (عدد الكلاب، استمر في العد)
}
كم عدد الكلاب لديك (أخبرك بعدد الكلاب) // لا يبدو الأمر أفضل بكثير. . .

1.4 طرق رد الاتصال مختلفة ويجب تذكرها بشكل منفصل (عيب رد الاتصال 2)

 readFile('C:\1.txt',function (error, data) { // رد الاتصال في طريقة قراءة ملف Node.js if(error) {
console.log('النجاح')
console.log(data.toString())
} آخر {
console.log("فشلت قراءة الملف")
}
})

$.ajax({ // عنوان URL لرد الاتصال: '/2.txt' في طريقة ajax في jQuery
النجاح: الوظيفة (الاستجابة) {
console.log('النجاح')
},
خطأ: وظيفة () {
console.log ("فشل")
}
})

2. الغرض من الوعد

تعد الوعود حلاً للبرمجة غير المتزامنة، وهو أكثر منطقية وقوة من الحلول التقليدية - عمليات الاسترجاعات والأحداث. تم اقتراحه وتنفيذه لأول مرة بواسطة المجتمع، وقام ES6 بكتابته في معيار اللغة، وتوحيد استخدامه، وتوفير كائنات الوعد محليًا.

3. مبدأ الوعد

3.1 مبدأ التنفيذ

ينص ES6 على أن كائن Promise هو مُنشئ يُستخدم لإنشاء مثيلات Promise. من خلال إرجاع مثيل لكائن Promise داخل الوظيفة، يمكنك استخدام خصائص وأساليب Promise للخطوة التالية.

 وظيفة اسم الوظيفة () {إرجاع وعد جديد (وظيفة (حل، رفض) {
// ... بعض التعليمات البرمجية إذا (/* نجحت العملية غير المتزامنة */){
حل (قيمة)؛ // يتم الاتصال به عندما تنجح العملية غير المتزامنة ويتم تمرير النتيجة كمعلمة } else {
رفض (خطأ)؛ // يتم الاتصال به عند حدوث فشل غير متزامن، وتمرير الخطأ كمعلمة }

})
}

3.2 منطق الاتصال

لم يبلغ S1 أو E1 عن خطأ، وقم بتنفيذ S2 (تنفيذ القرار، يعتقد النظام أنه قد تم، ولم يتم الإبلاغ عن أي خطأ)
إذا أبلغ S1 أو E1 عن خطأ، فقم بتنفيذ E2 (ارفض التنفيذ، ويعتقد النظام أن الأمر لم يتم، ويبلغ عن خطأ)

مدخل الواجهة الأمامية (vue) إلى دورة الإتقان: أدخل التعلم

4. استخدام الوعد

4.1 خصائص الوعد وأساليبه

ملكية
يمثل Promise.prototype طريقة النموذج الأولي لمنشئ Promise
Promise.prototype.then()
إرجاع الوعد. يتطلب الأمر معلمتين على الأكثر: وظائف رد الاتصال الخاصة بالنجاح والفشل.
Promise.prototype.catch()
قم بإرجاع الوعد والتعامل مع الرفض. أي ما يعادل Promise.prototype.then (غير محدد، onRejected)
Promise.prototype.finally()
تُرجع الطريقة أخيرًا () وعدًا بعد تنفيذ ثم () وقبض ()، سيتم تنفيذ وظيفة رد الاتصال المحددة بواسطة أخيرًا. تجنب الموقف الذي يجب فيه كتابة نفس العبارة مرة واحدة في ثم () وقبض ().
Promise.all (قابل للتكرار)
إرجاع مثيل Promise بعد حل جميع الوعود في المعلمات القابلة للتكرار، يكمل رد الاتصال الحل.
Promise.race (قابل للتكرار)
إرجاع وعد، مصحوبًا بالقيمة المرتجعة لكائن الوعد أو سبب الخطأ للرفض، طالما أن هناك كائن وعد في الكائن التكراري "يحل" أو "يرفض".
الوعد.الحل()
تُرجع كائن Promise الذي يتم حله بالقيمة المحددة. ولكن إذا كانت هذه القيمة قابلة للتنفيذ (أي باستخدام طريقةthen)، فإن الوعد الذي تم إرجاعه سوف "يتبع" الكائن القابل للتنفيذ ويتبنى حالته النهائية (بالإشارة إلى الحل/الرفض/المعلق/التسوية إذا كانت القيمة الواردة نفسها كذلك). كائن وعد، ثم يتم إرجاع الكائن كقيمة إرجاع لطريقة Promise.resolve؛ وإلا، يتم إرجاع كائن الوعد بهذه القيمة كحالة النجاح.
وعد.رفض()
إرجاع كائن وعد مع معلمة سبب الرفض.

4.2 أعد كتابة المثال في رد الاتصال الجحيم إلى نموذج الوعد

يمكنك أن ترى أنه بعد استخدام Promise، يصبح المنطق بديهيًا للغاية ومكتوبًا بشكل أكثر اكتمالًا.

عندما يكون الوعد متداخلاً في الوعد، أي عندما يكون الوعد متسلسلاً، انتبه إلى فشل نقل المعلومات. عندما نستخدم سلسلة الوعد، إذا كانت كل خطوة تتطلب بيانات من الخطوة السابقة، فيجب تمرير المعلمات بنجاح من خلال الحل إذا فشلت المعلمات، قم بتمرير المعلمات من خلال الرفض. إذا نسيت تمرير المعلمات، فلن تحصل على النتيجة المرجوة.
يقوم الحل بإرجاع البيانات الناجحة إلى رد الاتصال التالي
يؤدي الرفض إلى إرجاع البيانات الفاشلة إلى رد الاتصال التالي.

قم بتمرير معلمة لحلها هنا وتغييرها إلى مثال للفشل. لا تقم بتمرير معلمات للرفض أولاً. إذا فشلت، فلن يحصل رد الاتصال التالي على البيانات.

تمرير المعلمات للرفض

يمكننا أن نرى أنه حتى إذا تم تمرير رد الاتصال بالفشل، فسيتم تنفيذ رد الاتصال التالي للنجاح نظرًا لأنه غير معروف () يُرجع بشكل افتراضي، وهو ما يعادل الفشل الذي تمت معالجته. سيتم تنفيذ رد الاتصال التالي.
قم بتغييره إلى ما هو متوقع، أي أنه لن يتم استدعاؤه إذا فشل.

نموذج قصير لعدم الدعوة إلى الفشل

بعد تنفيذ الموقف أعلاه، لن يتم تنفيذ رد الاتصال الناجح في .then (باستثناء الكلاب) فلنقم بإضافة رد اتصال فاشل لنرى

يمكنك أيضًا إرجاع العزم حتى يمكن تنفيذ عمليات رد الاتصال الناجحة اللاحقة.

4.3 التطبيق

يؤدي تحميل الصورة إلى كتابة تحميل الصورة كوعد. وبمجرد اكتمال التحميل، تتغير حالة الوعد.

 صورة التحميل المسبق = الوظيفة (المسار) {
إرجاع وعد جديد (وظيفة (حل، رفض) {
صورة ثابتة = صورة جديدة ()؛
image.onload = Resolve;
image.onerror = رفض؛
image.src = المسار؛
});
};

الجمع بين وظيفة المولد والوعد (لمزيد من التفاصيل، راجع الرابط المرجعي، البرنامج التعليمي لـ Ruan Yifeng)

5. قم بإنهاء رد الاتصال في Promise

5.1 في انتظار

حالة ناجحة

استخدم محاولة الصيد في حالة الفشل

استخدم الانتظار مع محاولة الصيد، وهو أكثر اكتمالا.

6. ملخص

يمكن استخدام كائنات الوعد لتغيير الوظائف العادية إلى نماذج إرجاع الوعد لحل مشكلة جحيم رد الاتصال.
فهم منطق استدعاء النجاح والفشل في Promise ويمكن تعديله بمرونة.
افهم المعرفة الأساسية، واستخدمها أولاً، ثم ادمج المعرفة واستيعابها ببطء.

ما ورد أعلاه هو المحتوى التفصيلي لتحليل المثال لمبدأ واستخدام ES6 Promise!