كيفية كتابة رمز جافا سكريبت أكثر أناقة مع الوعود

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

وعود سهلة القراءة

على سبيل المثال ، نريد الحصول على بعض البيانات من واجهة برمجة تطبيقات HipsterJesus وإضافة هذه البيانات إلى صفحتنا. بيانات الاستجابة لهذه واجهات برمجة التطبيقات هي كما يلي:

 {"text": "<p> lorem ipsum ... </p>" ، "params": {"paras": 4 ، "type": "hipster-latin"}}

لاستخدام عمليات الاسترجاعات ، عادة ما نكتب شيئًا مثل ما يلي:

 $ .getjson ('http://hipsterjesus.com/api/' ، function (data) {$ ('body'). append (data.text) ؛}) ؛

إذا كان لديك خبرة في استخدام jQuery ، فستدرك أننا أنشأنا طلب Get ونريد أن يكون الرد JSON. نقوم أيضًا بتمرير وظيفة رد الاتصال لقبول JSON للاستجابة لإضافة البيانات إلى المستند.

هناك طريقة أخرى للكتابة وهي استخدام كائن الوعد الذي تم إرجاعه بواسطة طريقة GetJson. يمكنك ربط رد الاتصال مباشرة إلى كائن الإرجاع هذا.

 var promise = $ .getjson ('http://hipsterjesus.com/api/') ؛ promise.done (function (data) {$ ('body'). append (data.text) ؛}) ؛

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

 var promise = $ .getjson ('http://hipsterjesus.com/api/') ؛ promise.done (function (data) {$ ('body'). append (data.text) ؛}) ؛ promise.fail (function () {$ ('body').

يحذف معظم الأشخاص متغير الوعد ، وهو أكثر إيجازًا ويمكنهم رؤية وظيفة الكود في لمحة.

 $ .getjson ('http://hipsterjesus.com/api/') .done (دالة (بيانات) {$ ('body'). إلحاق (data.text) ؛}). fail (function () {$ ('body'). oppend ('<p> oh no ، شيء ما حدث! </p>) ؛

يحتوي jQuery أيضًا على معالج الأحداث الذي يحدث طوال الوقت ، وسيتم استدعاؤه بغض النظر عن نجاح الطلب أو الفشل.

 $ .getjson ('http://hipsterjesus.com/api/') .done (function (data) {$ ('body'). إلحاق (data.text) ؛}). فشل (function () {$ ('body'). وعد بهذا سيضاف!. </p> ') ؛

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

واجهة برمجة تطبيقات أفضل

على سبيل المثال ، نريد إنشاء كائن مغلف من واجهة برمجة تطبيقات HipsterJesus. سنضيف طريقة - HTML ، والتي تُرجع بيانات HTML من API. على عكس إعداد معالج رد الاتصال لتحليل الطلبات ، يمكننا أن نعيد الطريقة إلى كائن الوعد.

 var hipsterjesus = {html: function () {return $ .getjson ('http://hipsterjesus.com/api/') .Then (function (data) {return data.text ؛}) ؛ }} ؛

هذا رائع حتى نتمكن من تجاوز كائن الوعد دون القلق بشأن متى أو كيفية تحليل قيمته. يمكن تسجيل أي رمز يتطلب قيمة إرجاع الوعد مع رد اتصال استجابة ناجح.

تتيح لنا الطريقة آنذاك تعديل نتيجة الوعد ونقلها إلى المعالج التالي في السلسلة. هذا يعني أنه الآن يمكننا استخدام واجهة برمجة التطبيقات الجديدة مثل هذا:

 hipsterjesus.html (). تم (وظيفة (html) {$ ("body"). إلحاق (html) ؛}) ؛

حتى وقت قريب ، لدى AngularJS ميزة قاتلة ، حيث يمكن أن تكون القوالب مرتبطة مباشرة بالوعود. في وحدة تحكم Angular ، مثل هذا:

 $ scope.hipsteripsum = $ http.get ('http://hipsterjesus.com/api/') ؛

وبهذه الطريقة ، من السهل جدًا كتابة {{hipsteripsum.text}} في القالب. عندما يحل الوعد ، لا يحتاج Angular إلى تحديث العرض تلقائيًا. لسوء الحظ ، تخلى الفريق الزاوي عن هذه الميزة. يمكن الآن تمكينه عن طريق استدعاء $ parseprovider.unwrappromises (صحيح). آمل أن يكون لدى Angular هذه الميزة بالفعل في أطر أخرى (سأراقبها).

استدعاء سلسلة

أفضل جزء في الوعد هو أنه يمكنك ربطهم معًا. على سبيل المثال ، نريد إضافة طريقة إلى واجهة برمجة التطبيقات التي تُرجع مجموعة.

 var hipsterjesus = {html: function () {return $ .getjson ('http://hipsterjesus.com/api/') .Then (function (data) {return data.text ؛}) ؛ } ، الفقرات: function () {return this.html (). }} ؛

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

يمكننا توصيل الوعود في أي وقت حسب الحاجة. دعنا نضيف واحدة.

 var hipsterjesus = {html: function () {return $ .getjson ('http://hipsterjesus.com/api/') .Then (function (data) {return data.text ؛}) ؛ } ، الفقرات: function () {return this.html (). } ، الجمل: function () {return this.paragraphs (). }} ؛

مكالمات متعددة

ولعل أبرز ميزة الوعد هي القدرة على استدعاء واجهات برمجة التطبيقات المتعددة. ماذا يحدث إذا كنت بحاجة إلى إنشاء مكالمتين API في نفس الوقت عند استخدام رد الاتصال؟ يمكنك كتابة هذا:

 var firstdata = null ؛ var secondData = null ؛ var ropearecallback = function () {if (! firstData ||! secondData) return ؛ // افعل شيئًا} $. get ("http://example.com/first" ، function (data) {firstData = data ؛ responseCallback () ؛}) ؛ دولار.

هذا أسهل بكثير لاستخدام الوعد:

 var firstpromise = $ .get ("http://example.com/first") ؛ var secondpromise = $ .get ("http://example.com/second") ؛ دولار.

هنا نستخدم طريقة عندما ربطها بمعالج يتم استدعاؤه عند اكتمال كلا الطلبات.

ختاماً

هذا وعد. آمل أن تفكر على الفور في بعض الأشياء الرهيبة التي يمكن تحقيقها بوعد. ما الذي يعجبك أكثر في استخدامها؟ قل لي في التعليقات!

*ملاحظة: بالنسبة للبساطة ، تستخدم هذه المقالة تأخير التنفيذ من jQuery. هناك اختلافات خفية بين الكائن المؤجل jQuery والوعود/مواصفات+ ، والتي هي أكثر قياسية.

المقالة أعلاه كيفية استخدام الوعود لكتابة رمز جافا سكريبت أناقة هي كل المحتوى الذي أشاركه معك. آمل أن يعطيك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.