Async/Await
Async/Await در JavaScript یک قابلیت مدرن است که مدیریت عملیات‌های غیرهمزمان (Asynchronous) را ساده و خوانا می‌کند. تصور کنید در حال ساخت یک خانه هستید: ابتدا پایه‌ها را می‌ریزید، سپس دیوارها ساخته می‌شوند و در نهایت اتاق‌ها را تزئین می‌کنید. Async/Await به همین شکل عمل می‌کند؛ هر عملیات غیرهمزمان منتظر می‌ماند تا مرحله قبلی کامل شود و ترتیب منطقی و واضحی در کد ایجاد می‌شود.
در یک فروشگاه آنلاین (Online Shop) می‌توان از Async/Await برای بررسی موجودی کالا و پردازش پرداخت‌ها به صورت متوالی استفاده کرد تا تجربه کاربری روانی ایجاد شود. در وب‌سایت خبری (News Website) مقالات و نظرات می‌توانند به ترتیب صحیح لود شوند. در یک وبلاگ شخصی (Personal Blog) نوشته‌ها و کامنت‌ها به شکل منظم نمایش داده می‌شوند و در پرتال‌های دولتی (Government Portal) اطلاعات کاربران و داده‌ها به صورت امن و پیوسته بارگذاری می‌شوند.
در این آموزش شما یاد خواهید گرفت که چگونه توابع async بسازید، خطاها را مدیریت کنید و Async/Await را با فراخوانی API و دستکاری DOM ترکیب نمایید. این روند مانند سازماندهی یک کتابخانه یا نوشتن نامه‌ای است که همه جزئیات به ترتیب درست قرار گرفته باشند. در نهایت، خواهید توانست کدهای غیرهمزمان قابل پیش‌بینی و بهینه بنویسید که تجربه کاربری در پلتفرم‌های مختلف را بهبود می‌بخشد.
مثال پایه
javascriptasync function fetchLatestArticles() {
try {
// دریافت مقالات جدید از API
const response = await fetch('[https://api.example.com/articles](https://api.example.com/articles)');
const data = await response.json();
console.log('Latest Articles:', data);
} catch (error) {
console.error('خطا در دریافت مقالات:', error);
}
}
fetchLatestArticles();در مثال بالا، یک تابع غیرهمزمان با کلیدواژه async تعریف شده است که امکان استفاده از await را فراهم می‌کند. تابع fetch یک Promise برمی‌گرداند که نمایانگر درخواست شبکه برای دریافت داده‌ها است. با استفاده از await، اجرای تابع تا زمان تکمیل Promise متوقف می‌شود و سپس پاسخ به JSON تبدیل شده و در متغیر data ذخیره می‌شود.
بلوک try/catch برای مدیریت خطاها بسیار مهم است و از خرابی برنامه در صورت خطاهای شبکه یا پاسخ‌های غیرمنتظره API جلوگیری می‌کند. برای مبتدیان ممکن است سؤال پیش آید که چرا await نمی‌تواند خارج از async استفاده شود؛ دلیل آن نیاز await به یک زمینه async برای متوقف کردن ایمن اجرای تابع است.
استفاده از Async/Await کد را خواناتر و ساده‌تر می‌کند. به عنوان مثال، در یک وب‌سایت خبری مقالات می‌توانند به صورت پویا بدون مسدود کردن UI بارگذاری شوند. این فرایند شبیه ساخت یک خانه است که هر مرحله باید قبل از شروع مرحله بعد تکمیل شود.
مثال کاربردی
javascriptasync function loadProductAndReviews(productId) {
try {
// دریافت جزئیات محصول از API فروشگاه آنلاین
const productResponse = await fetch(`https://api.example.com/products/${productId}`);
const productData = await productResponse.json();
console.log('جزئیات محصول:', productData);
// دریافت نظرات کاربران درباره محصول
const reviewsResponse = await fetch(`https://api.example.com/products/${productId}/reviews`);
const reviewsData = await reviewsResponse.json();
console.log('نظرات کاربران:', reviewsData);
} catch (error) {
console.error('خطا در بارگذاری اطلاعات محصول:', error);
}
}
loadProductAndReviews(101);این مثال عملی، استفاده از Async/Await را در زمینه فروشگاه آنلاین نشان می‌دهد. تابع loadProductAndReviews ابتدا جزئیات محصول را دریافت می‌کند و سپس نظرات کاربران را به ترتیب بارگذاری می‌کند تا اطلاعات صفحه یکپارچه و منظم نمایش داده شوند. این فرآیند مانند تزئین یک اتاق است: ابتدا مبلمان چیده می‌شود و سپس جزئیات دکور اضافه می‌شود.
بلوک try/catch خطاهای شبکه یا API را مدیریت می‌کند تا پایداری برنامه حفظ شود. ترکیب Async/Await با دستکاری DOM به روز رسانی پویا رابط کاربری را ممکن می‌سازد. در پرتال‌های دولتی، این روش می‌تواند اطلاعات کاربران و داده‌های مهم را به ترتیب منطقی نمایش دهد و تجربه کاربری را بهبود بخشد.
بهترین شیوه‌ها شامل استفاده از await فقط در توابع async، مدیریت تمام خطاها با try/catch، استفاده از Promise.all برای اجرای موازی و جداسازی منطق کسب‌وکار از UI است.
خطاهای رایج شامل استفاده از await در حلقه‌های بزرگ بدون بهینه‌سازی، استفاده از await خارج از async، نادیده گرفتن خطاها و استفاده نادرست که باعث نشت حافظه یا مسدود شدن UI می‌شود. برای رفع مشکل Debugging می‌توان مقادیر میانی را لاگ کرد، درخواست‌های شبکه را مانیتور کرد و توابع غیرهمزمان را جداگانه تست نمود. توصیه عملی: ابتدا درخواست API را بررسی و سپس UI را به‌روزرسانی کنید تا تجربه کاربری روان باشد.
📊 مرجع سریع
| Property/Method | Description | Example |
|---|---|---|
| async | تعریف یک تابع غیرهمزمان | async function fetchData() {} |
| await | توقف اجرای تابع تا زمان تکمیل Promise | const data = await fetch(url) |
| try/catch | مدیریت خطاها | try { await fetch() } catch(e) {} |
| Promise.all | اجرای چند Promise به صورت موازی | await Promise.all(\[fetch(url1), fetch(url2)]) |
| fetch | دریافت داده از شبکه | const res = await fetch('url') |
به طور خلاصه، Async/Await مدیریت عملیات‌های غیرهمزمان را در JavaScript ساده می‌کند، خوانایی و قابلیت نگهداری کد را افزایش می‌دهد و مدیریت خطاها را بهبود می‌بخشد. این قابلیت برای فروشگاه‌های آنلاین، وب‌سایت‌های خبری، وبلاگ‌های شخصی و پرتال‌های دولتی کاربردی است و به سازماندهی فراخوانی‌های API و به‌روزرسانی پویا DOM کمک می‌کند.
گام بعدی شامل مطالعه الگوهای پیشرفته Promise، مدیریت زنجیره خطاها و بهینه‌سازی عملکرد با Promise.all است. همچنین ترکیب Async/Await با دستکاری DOM و ارتباط با بک‌اند برای ایجاد رابط کاربری پویا و کارآمد توصیه می‌شود. تمرین در پروژه‌های واقعی، مانند بارگذاری پویا اخبار یا جزئیات محصولات، درک شما را از Async/Await و مهارت‌های برنامه‌نویسی مدرن JavaScript تقویت خواهد کرد.
🧠 دانش خود را بیازمایید
آزمون دانش شما
درک خود از این موضوع را با سوالات کاربردی بسنجید.
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود