آموزش جاوا اسکریپت Async: دیگه کد فرانت‌اند کُند نمی‌نویسی! 🚀
دوست داری سرعت لود سایتت رو چند برابر کنی و کاربرات رو راضی نگه داری؟ 😎 کلیدش یادگیری جاوا اسکریپت Async هست! توی این مقاله به زبون ساده و خودمونی، هرچیزی که برای استفاده از Async در فرانت‌اند نیاز داری رو بهت میگم. با من همراه باش!
چرا Async توی فرانت‌اند مثل سوخت جت میمونه؟ 🚀
جاوا اسکریپت یه زبون “تک‌رشته‌ای” (Single-Threaded) هست، یعنی فقط یه کار رو همزمان میتونه انجام بده. حالا تصور کن یه درخواست HTTP طولانی داری که منتظر جواب سرور هستی. اگه از Async استفاده نکنی، کل سایتت فریز میشه و کاربر بیچاره باید منتظر بمونه! 😱
Async به جاوا اسکریپت این امکان رو میده که یه کار رو شروع کنه، بعد بره سراغ کارهای دیگه و هر وقت جواب کار اولی اومد، اون رو هم هندل کنه. اینطوری سایتت سریع و روون کار میکنه و کاربر حس خوبی داره. ⚡
یه مثال ساده برات بزنم:
بدون Async: مثل اینه که توی یه رستوران فقط یه گارسون باشه. همه باید منتظر بمونن تا اون یه نفر سفارش‌ها رو بگیره و غذاها رو بیاره. 🐌
با Async: مثل اینه که چندتا گارسون داشته باشی. هر گارسون میتونه چندتا سفارش رو همزمان هندل کنه و غذاها سریع‌تر به دست مشتری برسه. 😃
همین حالا خرید خود را ثبت کنید!
از جهنم Callbackها تا بهشت Async/Await: سفر آسون به دنیای Async 🗺️
خب، فهمیدی Async چقدر مهمه؟ حالا بریم ببینیم چطوری میتونی ازش استفاده کنی و کدهای خوشگل و تمیز بنویسی.
Callbackها: اولین قدم، اما نه آخرین! 👣
قدیم‌ها برنامه‌نویس‌ها از Callbackها استفاده میکردن. Callbackها توابعی هستن که به عنوان ورودی به یه تابع دیگه پاس داده میشن. وقتی یه کار تموم میشه، Callback اجرا میشه و نتیجه رو برمیگردونه.
اما مشکل Callbackها اینه که اگه زیاد ازشون استفاده کنی، کدت میشه یه “جهنم Callback” (Callback Hell)! یه کد تو در تو و پیچیده که خوندنش خیلی سخته. 😫
Promiseها: ناجی کدهای Async! 🦸♂️
Promiseها اومدن تا Callbackها رو نجات بدن. یه Promise یه نشونه‌گر برای یه مقدار هست که ممکنه هنوز در دسترس نباشه. Promise سه تا حالت داره:
در انتظار (Pending): عملیات هنوز در حال انجامه. ⏳
انجام شده (Resolved): عملیات با موفقیت تموم شده. ✅
رد شده (Rejected): عملیات با خطا مواجه شده. ❌
با استفاده از `.then()` و `.catch()` میتونی نتیجه یه Promise رو هندل کنی و زنجیره‌ای از عملیات‌های Async رو به صورت منظم و مرتب بنویسی.
Async/Await: راحت‌ترین راه برای کدنویسی Async! 😎
Async/Await مثل یه شمشیر جادویی میمونه که کدهای Async رو خیلی آسون‌تر میکنه. با استفاده از کلمات کلیدی `async` و `await` میتونی کدهای Async رو مثل کدهای معمولی و تر و تمیز بنویسی. ✨
فقط کافیه یه تابع رو با کلمه کلیدی `async` مشخص کنی و قبل از هر Promise از کلمه کلیدی `await` استفاده کنی. جاوا اسکریپت صبر میکنه تا Promise تموم بشه و بعدش ادامه میده. به همین سادگی! 😄
همین حالا خرید خود را ثبت کنید!
درخواست‌های HTTP: ارتباط با دنیای بیرون! 🌐
یکی از مهم‌ترین کاربردهای Async توی فرانت‌اند، فرستادن درخواست‌های HTTP به سرور هست. با درخواست‌های HTTP میتونی:
داده‌ها رو از سرور بگیری. 📤
داده‌ها رو به سرور بفرستی. 📥
با APIها ارتباط برقرار کنی. 🤝
متدهای HTTP: زبون مشترک با سرور 🗣️
GET: برای گرفتن داده‌ها از سرور (مثل گرفتن لیست محصولات).
POST: برای فرستادن داده‌ها به سرور (مثل ثبت نام کاربر).
Query Parameters و Request Body: چطوری به سرور اطلاعات بفرستیم؟ 📝
Query Parameters: اطلاعات رو به صورت یه رشته توی آدرس URL میفرستی (مثلا: `example.com?category=books&price=100`).
Request Body: اطلاعات رو به صورت ساختاریافته (مثلا JSON) توی بدنه درخواست میفرستی.
15 سوال داغ شما درباره جاوا اسکریپت Async و درخواست HTTP ❓
1. Async/Await دقیقا چیه و چه فرقی با Promise داره؟
Async/Await یه روش راحت‌تر و خواناتر برای کار با Promiseهاست. در اصل، Async/Await زیر پوستش از Promise استفاده میکنه، اما کدنویسی رو خیلی آسون‌تر میکنه.
2. چطوری با Async/Await یه درخواست GET ساده بفرستیم؟
برای این کار، میتونی از تابع `fetch` استفاده کنی. یه تابع `async` تعریف کن و با `await` منتظر جواب `fetch` بمون.
3. `fetch` و `XMLHttpRequest` چه فرقی دارن؟
`fetch` یه API مدرن‌تر و مبتنی بر Promise هست که کار باهاش خیلی راحت‌تره. `XMLHttpRequest` قدیمی‌تره و کدنویسی باهاش یکم پیچیده‌تره.
4. اگه درخواست HTTP با خطا مواجه شد، چطوری هندلش کنیم؟
میتونی از بلوک `try…catch` استفاده کنی. کد مربوط به درخواست رو توی بلوک `try` بنویس و اگه خطایی رخ داد، توی بلوک `catch` هندلش کن.
5. چطوری داده‌ها رو به صورت JSON به سرور بفرستیم؟
اول داده‌هات رو با استفاده از `JSON.stringify()` به یه رشته JSON تبدیل کن، بعد اون رو توی بدنه درخواست قرار بده.
6. Query Parameters چی هستن و چه کاربردی دارن؟
Query Parameters متغیرهایی هستن که توی URL بعد از علامت `?` میان. ازشون برای فیلتر کردن و مرتب‌سازی داده‌ها استفاده میشه.
7. چطوری از جهنم Callbackها فرار کنیم؟
با استفاده از Promiseها و Async/Await میتونی کدهای ناهمزمان رو خیلی تمیزتر و ساختاریافته‌تر بنویسی.
8. فرق بین `async function` و `function` معمولی چیه؟
توابع `async` بهت اجازه میدن از کلمه کلیدی `await` استفاده کنی. علاوه بر این، توابع `async` به صورت اتوماتیک یه Promise برمی‌گردونن.
9. چطوری یه فایل رو با جاوا اسکریپت به سرور بفرستیم؟
میتونی از `FormData` برای این کار استفاده کنی. یه شیء `FormData` بساز، فایل رو بهش اضافه کن و اون رو توی بدنه درخواست قرار بده.
10. چطوری نشون بدیم که یه درخواست HTTP چقدر پیشرفت کرده؟
بعضی APIها (مثل `XMLHttpRequest`) رویدادهایی دارن که نشون میدن چقدر از داده‌ها ارسال یا دریافت شده. میتونی از این رویدادها برای نشون دادن نوار پیشرفت استفاده کنی.
11. متدهای HTTP `PUT` و `PATCH` چه فرقی دارن؟
`PUT` برای جایگزین کردن کامل یه منبع استفاده میشه، در حالی که `PATCH` برای به روز رسانی یه قسمت از منبع استفاده میشه.
12. چطوری Headerهای یه درخواست HTTP رو تنظیم کنیم؟
میتونی Headerها رو توی تنظیمات `fetch` (یا `XMLHttpRequest`) مشخص کنی.
13. CORS چیه و چطوری حلش کنیم؟
CORS یه مکانیزم امنیتیه که از ارسال درخواست‌های HTTP از دامنه‌های مختلف جلوگیری میکنه. برای حل این مشکل، سرور مقصد باید Headerهای CORS مناسب رو تنظیم کنه.
14. چطوری یه درخواست HTTP رو کنسل کنیم؟
با استفاده از یه شیء `AbortController` میتونی یه درخواست HTTP رو کنسل کنی.
15. چطوری برای یه درخواست HTTP یه timeout تنظیم کنیم؟
میتونی از یه `setTimeout` به همراه یه `AbortController` برای تنظیم timeout استفاده کنی.
امیدوارم این مقاله بهت کمک کنه تا توی دنیای Async جاوا اسکریپت یه کدنویس حرفه‌ای بشی! 💪
نقد و بررسی‌ها
هنوز بررسی‌ای ثبت نشده است.