برنامه نویسی Async با ES 6

اندازه‌ی قلم متن

تخمین مدت زمان مطالعه‌ی مطلب: هفت دقیقه

جاوا اسکریپت به صورت single-thread عمل می‌کند. به این معنا که دو اسکریپت نمی‌توانند به صورت همزمان اجرا شوند و باید یکی پس از دیگری اجرا شوند. ساده‌ترین شکل برنامه‌نویسی غیرهمزمان در جاوا اسکریپت استفاده از callback می‌باشد. به عنوان مثال در سناریوی زیر Caller یکسری عملیات غیرهمزمان را مانند یک فراخوانی XHR و یا یک تایمر، انجام می‌دهد. زمانیکه Caller عملیات غیرهمزمانی را آغاز کرد، یک callback را به آن ارسال خواهد کرد و بعد از مطمئن شدن از موفق بودن عملیات، callback را فراخوانی می‌کند. بعد از پایان عملیات، callback درون call stack قرار خواهد گرفت و هر وقت که بقیه‌ی عملیات به اتمام رسید، اجرا خواهد شد.

این روش چندین مشکل دارد:

تنها caller از پایان یافتن عملیات غیرهمزمان مطلع خواهد شد.
هندل کردن خطا و همچنین مدیریت چندین عملیات asynchronous به صورت همزمان خیلی سخت خواهد بود.

در اینحالت callback باید به چندین کار رسیدگی کند:

پردازش نتایج فراخوانی‌های async
اجرای دیگر عملیات براساس پاسخ

کد زیر را در نظر بگیرید:

function getCompanyFromOrderId(orderId) {
    getOrder(orderId, function(order) {
        getUser(order.userId, function(user) {
            getCompany(user.companyId, function(company) {
                // do something with company
            });
        });
    });
}

در کد فوق به اطلاعات یک شرکت براساس شماره سفارش آن دسترسی خواهیم داشت. پس از دریافت سفارش، اطلاعات کاربر را دریافت خواهیم کرد. پس از پایان آن، می‌توانیم به اطلاعات شرکت دسترسی داشته باشیم. این سبک نوشتن کدها به صورت تودرتو خوانایی/ نگهداری کد را کاهش خواهد داد. همانطور که مشاهده می‌کنید callback نه تنها پاسخ بلکه یک callback دیگر را هربار به تابع بعدی ارسال می‌کند. در این‌حالت اگر بخواهیم استثناء‌ها را نیز مدیریت کنیم کدها به مراتب پیچیده‌تر خواهند شد:

function getCompanyFromOrderId(orderId) {
    try {
        getOrder(orderId, function (order) {
            try {
                getUser(order.userId, function (user) {
                    try {
                        getCompany(user.companyId, function (company) {
                            try {
                                // do something with company
                            } catch (ex) {
                                // handle exception
                            }
                        });
                    } catch (ex) {
                        // handle exception
                    }
                });
            } catch (ex) {
                // handle exception
            }
        });
    } catch (ex) {
        // handle exception
    }
}

ممکن است بگوئید که نیازی به این همه try/catch در کد فوق نیست. اما هر callback ایی که به صورت مجزا وارد call stack می‌شود، هر خطایی که صادر شود توسط شروع کننده‌ی اصلی درخواست async به دام انداخته نخواهد شد و در نتیجه نوشتن این همه try/catch ضروری است. لازم به ذکر است، به این نوع نوشتن callback به صورت تودرتو callback hell و یا pyramid of doom نیز گفته می‌شود.

راه‌حل: استفاده از Promises

Promises همیشه به عنوان یک راه‌حل برای callback hell شناخته شده هستند. Promises در واقع اشیایی هستند که این اطمینان را به شما خواهند داد تا بعد از پایان یک عملیات غیرهمزمان، پاسخ را صرفنظر از اینکه عملیات fail و یا success شده باشد، در اختیارتان قرار خواهند داد. یک Promise از دو قسمت تشکیل شده است:

Control
Promise

قسمت اول یا Control در بیشتر کتابخانه‌ها با نام Deferred نیز از آن نامبرده می‌شود و در واقع یک شیء مستقل است. در بعضی از پیاد‌ه‌سازی‌ها این شیء در واقع خودش یک callback است. قسمت دوم نیز خود Promise است. این شیء می‌تواند دیگر قسمت‌های کد را از پایان یافتن عملیات غیرهمزمان مطلع سازد.

یک Promise می‌تواند یکی از حالت‌های زیر را داشته باشد:

pending: یعنی وضعیت اولیه، هنوز به پایان نرسیده است.
fulfilled: یعنی عملیات با موفقیت پایان پذیرفته است.
rejected: یعنی عملیات با شکست مواجه شده است.

با ایجاد یک Promise، وضعیت آن در اولین مرحله و pending خواهد بود. سپس تبدیل به یکی از وضعیت‌های fulfilled و یا rejected خواهد شد.

اکنون اگر بخواهیم کد قبلی را با استفاده از Promises پیاده‌سازی کنیم به این چنین نتیجه‌ایی خواهیم رسید:

function getCompanyFromOrderId(orderId) {
    getOrder(orderId).then(function(order) {
        return getUser(order.orderId);
    }).then(function(user) {
        return getCompany(user.companyId);
    }).then(function(company) {
        // do something with company
    }).then(undefined, function(error) {
        // handle error
    })
}

در اینجا به جای استفاده از callback در تابع getCompanyFromOrderId یک promise را برمی‌گردانیم. وقتی تابع getOrder با موفقیت کارش را انجام داد، callback بعدی اجرا خواهد شد که در واقع تابع getUser را فراخوانی می‌کند. یک عملیات غیرهمزمان دیگر نیز یک promise را برمی‌گرداند. بعد از آن calback دیگری فراخوانی خواهد شد و به همین ترتیب... در نهایت نیز توسط یک then دیگر می‌توانیم خطاها را هندل کنیم. بنابراین در این‌حالت کد فوق خواناتر و نگهداری آن به مراتب ساده‌تر از حالت قبل می‌باشد.

promises خیلی وقت است که در قالب کتابخانه‌های third-party مانند Q, when, WinJS, RSVP.js در اختیار برنامه‌نویسان جاوا اسکریپت قرار دارد. در نتیجه کد فوق به صورت جنریک است؛ به این معنا که با هر کدام از کتابخانه‌های عنوان شده سازگاری دارد.

نحوه‌ی ایجاد Promise

ساختار اولیه برای ایجاد یک promise به اینصورت است:

var promise = new Promise(function(resolve, reject) {
  // انجام یکسری عملیات به عنوان مثال دریافت اطلاعات از سرور و...

  if (/* اگر کدهای فوق با موفقیت انجام شدند */) {
    resolve("عملیات با موفقیت انجام پذیرفت");
  }
  else {
    reject(Error("خطایی رخ داده است"));
  }
});

همانطور که مشاهده می‌کنید سازنده‌ی promise یک callback را از ورودی دریافت خواهد کرد. این callback نیز از ورودی دو پارامتر را دریافت میکند: resolve و reject. درون callback می‌توانیم کدهایمان را بنویسیم. بعد از اینکه عملیات با موفقیت انجام گرفت resolve را فراخوانی خواهیم کرد. در غیراینصورت reject را فراخوانی می‌کنیم. همچنین به جای استفاده از throw درون reject از شیء Error استفاده کرده‌ایم. زیرا بعداً برای دیباگ خطا می‌توانیم به اطلاعات کامل stack trace دسترسی داشته باشیم.

در ادامه نحوه‌ی استفاده از promise فوق را مشاهده می‌کنید:

promise.then(function(result) {
  console.log(result); // "عملیات با موفقیت انجام پذیرفت "
}, function(err) {
  console.log(err); // Error: "خطایی رخ داده است"
});

در اینجا تابع then دو آرگومان را از ورودی دریافت خواهد کرد؛ یکی برای حالت success و دیگری برای حالت failure. لازم به ذکر است، هر دوی این آرگومان‌ها اختیاری هستند.

به عنوان یک مثال عملی می‌توانیم متد get جی‌کوئری را به این صورت درون یک Promise قرار دهیم:

function get(url){
    return new Promise(function(resolve, reject) {
       $.get(url, function(data) {
           resolve(data);
       }) 
       .fail(function(){
          reject(); 
       });
    });
}

به اینصورت می‌توانیم از Promise فوق استفاده کنیم:

get('users.all').then(function(users){
    myController.users = users;
}, function(){
   delete myController.users; 
});

اگر هم مایل بودید می‌توانید به جای ارائه‌ی آرگومان دوم درون callback برای به دام انداختن خطاها از catch استفاده کنید:

get('users.all').then(function(users){
    myController.users = users;
})
.catch(function(){
    delete myController.users;
});

در شرایطی ممکن است بخواهیم بعد از اینکه تمامی Promise هایمان کارشان به اتمام رسید، یکسری عملیات دیگر را انجام دهیم:

var usersPromise = get('users.all');
var postsPromise = get('posts.everyone');

Promise.all([usersPromise, postsPromise])
.then(function(result){
    myController.users = result[0];
    myController.posts = result[1];
}, function(){
   delete myController.users;
   delete myController.posts; 
});

لازم به ذکر است اگر حتی یکی از Promiseها reject شود Promise اصلی نیز reject خواهد شد.

اگر خروجی then به صورت رشته‌ایی باشد چه اتفاقی خواهد افتاد؟

در حالت کلی خروجی هر then. به then بعدی پاس داده خواهد شد. به عنوان مثال در کد زیر نتایج به صورت رشته‌ایی برگردانده خواهند شد و می‌توانیم آن‌ها را به سادگی توسط JSON.parse به then بعدی ارسال کنیم:

get('users.all').then(function(usersString){
    return JSON.parse(usersString);
}).then(function(users){
   myController.users = users; 
});

و یا به صورت خلاصه‌تر می‌توانیم به اینصورت اینکار را انجام دهیم:

get('users.all').then(JSON.parse).then(function(users){
   myController.users = users; 
});

برای مشاهده‌ی دیگر متدهای استاتیک Promise می‌توانید به اینجا مراجعه نمائید.

برنامه نویسی Async با ES 6

مطالب مشابه