خانه / دسته‌بندی نشده / بررسی Promiseها در AngularJs بر اساس کارتون

بررسی Promiseها در AngularJs بر اساس کارتون

بررسی Promiseها  در Angular Js بر اساس کارتون

متن زیر بر گرفته از مقاله ای است که آقای  Andy Shora در بلاگ شخصی خودشون در این باره نوشته اند           .

یه روز صبح پدری به پسر خودش گفت:”برو وضعیت پیش بینی آب و هوا رو بگیر؛ پسر!”

هر شنبه صبح, یه پدری ا زپسرش می خواد که بره با استفاده از تلسکوپ قویش از بالاترین تپه به افق نگاه کنه؛ وضعیت آب و هوا رو برای عصر بگیره.پسر به پدرش قول(Promise) میده که میره و وضعیت آب و هوا رو می گیره. اون یک تعهد(Promise) هنگام ترک اتاق ایجاد می کنه.

در این لحظه؛ پدر تصمیم می گیره که اگه هوا برای فردا خوب باشه؛ برا فردا سفری رو برای ماهیگیری ترتیب می ده. ولی اگه هوا بد بود اینکار رو نمی کنه. و اگه پسر نتونه که وضعیت آب و هوا رو بگیره همچنان همونجا می مونه.

بعد حدود 30 دقیقه؛ پسر برگشت. اتفاقات مختلفی از هفته ای به هفته ی دیگر رخ داد:

خروجی اول) وضعیت آب و هوا گرفته شد! آفتابی J

پسر موفق شد که وضعیت آب و هوا رو بگیره, آسمان صاف و آفتابی! Promise was fulfilled پسر این Promise رو نگه داشت و پدر تصمیم گرفت که برای شنبه یه ماهیگیری رو ترتیب بده.

خروجی دوم) وضعیت آب و هوا گرفته شد؛ ابری و بارانی : )-

پسر در دریافت وضعیت آب و هوا موفق شد؛ اما هو ابری و بارانی بود.The Promise was fulfilled اما پدر تصمیم گرقت که خونه بمونن چون هوا بد بود.

 


خروجی سوم) نتونست وضعیت آب و هوا رو بگیره :-/

پسر نتونست که وضعیت آب و هوا رو مشخص کنه, مشکلی رخ داده بود؛ هوا خیلی غبارآلود و گرد و خاک بود و پسر نتونست ببینه که وضعیت آب و هوا از بالای تپه به چه صورت هست. تعهد پسر شکست خود. The promise was rejected! پدر هم تصمیم گرفت خونه بمونه؛ ارزش ریسک کردن نداشت.

 

خوب توی کد اینها شبیه چی هستند؟

پدر وظیفه Control  کردن logic رو توی این شرایط به عهده داره؛ و او با پسر به عنوان service تعامل داره.

قبلا logic رو بررسی کردیم.؛ پدر از پسر می خواد که وضعیت آب و هوا رو بگیره؛ و پسر نمی تونه بلافاصله جواب رو به پدر بده, و پدر کارای دیگه ای انجام میده تا زمانی که منتظر است تا پسر جواب رو به پدر برگردونه. و پسر هم Promise ایجاد می کنه که جواب رو حتما بر می گردونه. پدر وقتی که جواب رو گرفت می تونه تصمیم بگیره که قایق رو به آب بندازه یا توی خونه بمونه.  نکته ی مهم در اینجا اینه که وقتی که پسر میره بالای تپه تا وضعیت آب و هوا رو مشخص نکنه نباید پدر از انجام سایر کارها Block بشه.  بهمین دلیل این موقعیت برای ایجاد Promise موقعیت خوبی است؛ که می تونه حل بشه(fulfilled or rejected).

با استفاده از تابع then() انگولار می تونم بفهمیم که پدر باید چه کاری انجام بده به ازای هر خروجی. تابع then() دو تابع رو به عنوان پارامتر می گیره: یک تابع برای وقتی که Promise در حالت تکمیل fulfilled هست و تابع دیگه برای وقتی که خروجی promise در حالت rejected هست.

Controller: FatherCtrl

پدر موقیعیت های مختلف رو بصورت زیر کنترل می کنه:

// function somewhere in father-controller.js

        var makePromiseWithSon = function() {

            // This service’s function returns a promise, but we’ll deal with that shortly

            SonService.getWeather()

                // then() called when son gets back

                .then(function(data) {

                    // promise fulfilled

                    if (data.forecast===’good’) {

                        prepareFishingTrip();

                    } else {

                        prepareSundayRoastDinner();

                    }

                }, function(error) {

                    // promise rejected, could log the error with: console.log(‘error’, error);

                    prepareSundayRoastDinner();

                });

        };

Service:SonService

پسر به عنوان یک سرویس استفاده می شه, او از تپه بالا میره . سعی می کنه که آب و هوا رو ببینه. فرض می کنیم که پسر وقتی از طریق

تلسکوپ سعی می کنه که وضعیت آب و هوا رو بررسی کنه از یک API اب و هوا استفاده می کنه. که این API بصورت asynchronous عمیل می کنه؛ که ممکنه جوابی رو بگیره و یا اینکه به خطا بخوره.

app.factory(‘SonService’, function ($http, $q) {

        return {

            getWeather: function() {

                // the $http API is based on the deferred/promise APIs exposed by the $q service

                // so it returns a promise for us by default

                return $http.get(‘http://fishing-weather-api.com/sunday/afternoon’)

                    .then(function(response) {

                        if (typeof response.data === ‘object’) {

                            return response.data;

                        } else {

                            // invalid response

                            return $q.reject(response.data);

                        }

                    }, function(response) {

                        // something went wrong

                        return $q.reject(response.data);

                    });            }        };

خلاصه:

مقایسه نشون می ده که طبیعت درخواست پدر از پسر بصورت asynchronous هست و پدر نمی خواد که منتظر پسر دم در معطل بمونه؛ چون او کارای دیگه ای برای انجام دادن داره. در عوض او یک Promise رو دم در ایجاد می کنه و تصمیم می گیره که بر اساس سه سناریو وضعیت آب و هوا چه کاری رو انجام بده. پسر بلافاصله Promise رو از پدر میگیره و خونه رو ترک می کنه و در برگشتش Promise رو reject یا resolve می کنه.

پسر با سرویس غیر همزمان تعامل داره؛ اما تمام کارایی که انجام می ده از دید پدرش بصورت انتزاعی انجام می شه. چون پدرش واقعا از تکنولوژی چیزی متوجه نمیشه.

درباره ی masoud@admin

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

در تلگرام هم همراه شما هستم

اگر علاقمند به معماری نرم افزار و مبحث محبوب مایکروسرویس هستید؛ در کانال با ما همراه باشید. اطلاعات مفید زیادی در این کانال انتظار شما را می کشند. فقط کافیست دکمه ی پیوستن را بفشارید.

پیوستن بستن