تاریخچه عملیات‌های asnyc در JavaScript

تا حالا شده هرچقدر درباره‌ی یه موضوعی بخونی، باز هم درست درکش نکنی؟

حالا تصور کن که کسی میاد و توضیح می‌ده که چرا یک مشکل وجود داشته و چطور اون رو حل کردن. وقتی دلیلش رو بفهمی، راحت‌تر توی ذهنت جا می‌افته، مثل یک قصه‌ای که برات تعریف می‌شه.

توی برنامه‌نویسی، خیلی وقت‌ها به ما می‌گن که از یک ابزار چطوری استفاده کنیم، ولی خیلی کمتر پیش میاد که توضیح بدن چرا اون ابزار ساخته شده یا چه مشکلی رو حل می‌کنه.

من همین مشکل رو با Promise داشتم. ولی وقتی تاریخچه‌ی عملیات‌های async در جاوا اسکریپت رو خوندم، کاملاً برام روشن شد. فکر کردم این مطلب رو باهاتون به اشتراک بذارم، چون هم آموزنده‌ست و هم حداقل برای من جالب بود.

خب، همونطور که احتمالاً می‌دونید، جاوا اسکریپت single-thread هست؛ یعنی نمی‌تونه چند عملیات رو همزمان اجرا کنه. در ادامه، چالش‌های این موضوع رو با مثالی از درخواست (request) به سرور بررسی می‌کنیم.

قبل از 1999

در روزهای اول وب، یعنی قبل از سال 1999، صفحات وب یا کاملاً استاتیک بودن و نیازی به درخواست به سرور نداشتن یا اینکه درخواست‌ها فقط توسط HTML form‌ها ارسال می‌شد. این form‌ها با متدهای GET و POST اطلاعات رو ارسال می‌کردن. چالش اصلی این بود که با هر درخواست، کل صفحه reload می‌شد و این تجربه‌ی کاربری خیلی بدی رو به وجود می‌آورد، مخصوصاً برای داده‌های کوچک.

XMLHttpRequest (1999)

در سال 1999، مایکروسافت توی مرورگر Internet Explorer 5 ابزار قدرتمند خودش رو معرفی کرد: آبجکت XMLHttpRequest. این اولین ابزاری بود که به جاوا اسکریپت این امکان رو می‌داد که درخواست‌های async بفرسته و بدون نیاز به reload کل صفحه، به‌روزرسانی‌های جزئی روی صفحه انجام بده.

این ابزار، تحول بزرگی برای توسعه‌ی AJAX (Asynchronous JavaScript and XML) بود و راه رو برای اپلیکیشن‌های وب مدرن باز کرد.

Callbacks (اوایل دهه 2000)

با معرفی XMLHttpRequest، توسعه‌دهنده‌ها به دنبال راهی بودن که بدونن یک عملیات async چه زمانی تکمیل شده. راه‌حل اولیه استفاده از callback‌ها بود.

callback یک تابع هست که به‌عنوان آرگومان پاس داده می‌شه تا بعد از تکمیل عملیات async، اجرا بشه. مشکل اصلی callbackها این بود که منجر به چیزی به نام Callback Hell می‌شدن 🔥.

حالا Callback Hell چی هست؟

درواقع callback hell زمانی رخ می‌داد که با بزرگ‌تر و پیچیده‌تر شدن اپلیکیشن، توسعه‌دهنده‌ها callback‌ها رو داخل callback های دیگه می‌گذاشتن، که این کار باعث پیچیدگی زیاد کد و سخت شدن نگهداری اون می‌شد.

Promises (2015, ECMAScript 6)

برای رفع مشکلات callbackها، Promise‌ها در سال 2015 با نسخه‌ی ES6 معرفی شدن. Promise‌ها راه‌های ساختارمندتری برای مدیریت عملیات‌های async فراهم کردن و کنترل بهتری روی زنجیره‌ی عملیات‌ها به ما می‌دادن.

با Promise‌ها به‌جای پاس دادن یک callback، می‌تونیم یک object یا شیء promise رو برگردونیم و با then. و catch. تکمیل یا خطاهای اون رو کنترل کنیم.

Async/Await (2017, ECMAScript 2017)

هرچند که Promiseها برای مدیریت عملیات‌های async معرفی شده بودن، ولی هنوز هم برای عملیات‌های زنجیره‌ای زیاد دست و پا گیر بودن. اینجا بود که در سال 2017، Async/Await بر پایه‌ی Promiseها معرفی شد، که اجازه می‌داد توسعه‌دهنده‌ها کدهای asynchronous رو به شکل کدهای synchronous بنویسن.

توابعی که با async علامت‌گذاری می‌شن، به‌صورت خودکار یک Promise برمی‌گردونن و ما می‌تونیم داخلشون از await استفاده کنیم، که باعث می‌شه کد منتظر resolve شدن promise بمونه.

در این سبک کدنویسی برای مدیریت خطاها از try...catch استفاده می‌کنیم.

Axios (پس از 2015)

امروزه با اینکه Promises و Async/Await بسیار کاربردی هستن، اما کتابخانه‌هایی مثل Axios توسعه پیدا کردن که امکانات بیشتری رو ارائه میدن، از جمله:

• Parse کردن خودکار JSON
• Timeout درخواست‌ها
• امکان intercept کردن درخواست‌ها و پاسخ‌ها

این قابلیت‌ها Axios رو به یک ابزار قدرتمند و محبوب برای مدیریت درخواست‌ها تبدیل کرده.

در آخر این بود تاریخچه عملیات‌های async در جاوا اسکریپت.

امیدوارم این مطلب برای شما هم مثل من مفید و جالب بوده باشه. 😄