آموزش رایگان جاوا اسکریپت (JavaScript)

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

30م مهر 1403 محراب حسن زاده
مدیریت خطاها در Async/Await و Promises در جاوا اسکریپت: راهنمای کامل با مثال‌های عملی

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

 

مدیریت خطاها با Promises

استفاده از متد catch

در Promiseها، برای مدیریت خطاها می‌توانید از متد catch استفاده کنید. متد catch برای دریافت و مدیریت خطاهای ناشی از عملیات‌های ناهم‌زمان استفاده می‌شود.

ساختار کلی:


myPromise
  .then(result => {
    // عملیات موفقیت‌آمیز
  })
  .catch(error => {
    // مدیریت خطا
    console.error('Error:', error);
  });

 

مثال:


const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => reject('Something went wrong!'), 1000);
});

myPromise
  .then(result => {
    console.log('Result:', result);
  })
  .catch(error => {
    console.error('Error:', error); // Output: Error: Something went wrong!
  });

 

در این مثال، catch متدی است که برای دریافت و مدیریت خطاهایی که ممکن است در Promise رخ دهد، استفاده می‌شود. اگر Promise به وضعیت Rejected برود، خطا در بلوک catch مدیریت می‌شود.

 

زنجیره‌سازی catch

شما می‌توانید متد catch را در انتهای زنجیره‌ی thenها قرار دهید تا خطاهای مربوط به تمامی Promiseها را مدیریت کنید.

مثال:


fetchData()
  .then(data => processData(data))
  .then(processedData => saveData(processedData))
  .catch(error => {
    console.error('Error in the promise chain:', error);
  });

 

در این مثال، اگر هر کدام از توابع fetchData, processData یا saveData با خطا مواجه شوند، خطا به بلوک catch منتقل می‌شود و مدیریت خواهد شد.

 

مدیریت خطاها با async/await

استفاده از بلوک‌های try/catch

در توابع async, مدیریت خطاها با استفاده از بلوک‌های try/catch انجام می‌شود. این روش مشابه با مدیریت خطاها در کدهای هم‌زمان است و به شما امکان می‌دهد تا خطاها را به صورت منطقی و مؤثر مدیریت کنید.

ساختار کلی:


async function myAsyncFunction() {
  try {
    const result = await somePromise;
    console.log(result);
  } catch (error) {
    console.error('Error:', error);
  }
}

 

مثال:


async function fetchData() {
  throw new Error('Failed to fetch data');
}

async function getData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error); // Output: Error fetching data: Error: Failed to fetch data
  }
}

getData();

 

در این مثال، اگر Promise ناشی از fetchData به وضعیت Rejected برود، خطا در بلوک catch مدیریت می‌شود. این روش ساده و خوانا به شما امکان می‌دهد تا خطاها را به راحتی مدیریت کنید.

 

استفاده از finally

متد finally برای اجرای کدی است که باید در هر صورت، چه موفقیت‌آمیز و چه با خطا، اجرا شود. این متد به شما این امکان را می‌دهد که عملیات‌های تمیزکاری یا پایانی را انجام دهید.

مثال:


async function processData() {
  try {
    const data = await fetchData();
    console.log('Data:', data);
  } catch (error) {
    console.error('Error:', error);
  } finally {
    console.log('Cleanup or final actions');
  }
}

processData();

 

در این مثال، بلوک finally حتی اگر خطا رخ دهد یا نه، همیشه اجرا می‌شود. این روش به شما کمک می‌کند تا کارهایی مانند تمیزکاری یا اعمال نهایی را انجام دهید.

 

نکات و توصیه‌ها

استفاده از Promise.all و مدیریت خطاها

هنگامی که از Promise.all برای اجرای چندین Promise به طور هم‌زمان استفاده می‌کنید، اگر هر کدام از Promiseها با خطا مواجه شود، Promise.all به حالت Rejected خواهد رفت و خطا در بلوک catch مدیریت می‌شود.

مثال:


async function fetchAllData() {
  try {
    const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
    console.log(data1, data2);
  } catch (error) {
    console.error('Error in one of the promises:', error);
  }
}

 

استفاده از Promise.allSettled

برای دریافت نتایج تمام Promiseها، حتی اگر برخی از آن‌ها با خطا مواجه شوند، از Promise.allSettled استفاده کنید. این متد به شما امکان می‌دهد تا نتایج و خطاها را به طور کامل مدیریت کنید.

مثال:


async function fetchAllData() {
  const results = await Promise.allSettled([fetchData1(), fetchData2()]);
  results.forEach(result => {
    if (result.status === 'fulfilled') {
      console.log('Success:', result.value);
    } else {
      console.error('Error:', result.reason);
    }
  });
}

 

در این مثال، Promise.allSettled نتایج تمام Promiseها را به شما می‌دهد و می‌توانید وضعیت هر Promise را بررسی کرده و نتایج را مدیریت کنید.

 

آزمایش و عیب‌یابی

برای آزمایش و عیب‌یابی مدیریت خطاها، از کنسول‌ها و ابزارهای دیباگینگ استفاده کنید تا مطمئن شوید که خطاها به درستی مدیریت می‌شوند و کد شما به درستی عمل می‌کند.

 

نتیجه‌گیری

مدیریت خطاها در async/await و Promise یکی از جنبه‌های کلیدی برنامه‌نویسی ناهم‌زمان است. استفاده از متدهای catch, finally, و ساختار try/catch به شما این امکان را می‌دهد تا خطاها را به شکلی منطقی و مؤثر مدیریت کنید و از مشکلات اجرایی جلوگیری کنید. با درک و پیاده‌سازی صحیح این تکنیک‌ها، می‌توانید برنامه‌های پایدارتر و قابل‌اعتمادتری بنویسید و تجربه کاربری بهتری ارائه دهید.

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

آموزش جامع اینترفیس‌ها و کلاس‌ها (Classes) در ES6 جاوا اسکریپت: مفاهیم و کاربردها
28م مهر 1403

آموزش جامع اینترفیس‌ها و کلاس‌ها (Classes) در ES6 جاوا اسکریپت: مفاهیم و کاربردها

مطالعه بیشتر
آموزش موقعیت‌بندی المان‌ها با استفاده از position در CSS: نحوه استفاده از absolute، relative و fixed
5م شهریور 1402

آموزش موقعیت‌بندی المان‌ها با استفاده از position در CSS: نحوه استفاده از absolute، relative و fixed

مطالعه بیشتر
کنترل زمان‌بندی و اندازه‌گیری دقیق انیمیشن‌ها در CSS: آموزش جامع و اصول استاندارد
18م شهریور 1402

کنترل زمان‌بندی و اندازه‌گیری دقیق انیمیشن‌ها در CSS: آموزش جامع و اصول استاندارد

مطالعه بیشتر
آموزش انیمیشن‌های پیشرفته با keyframes در CSS: طراحی حرکات پویا و چند مرحله‌ای
18م شهریور 1402

آموزش انیمیشن‌های پیشرفته با keyframes در CSS: طراحی حرکات پویا و چند مرحله‌ای

مطالعه بیشتر
مدیریت فرم‌ها و ورودی‌ها در Vue.js | آموزش Form Handling با مثال کاربردی
22م آذر 1404

مدیریت فرم‌ها و ورودی‌ها در Vue.js | آموزش Form Handling با مثال کاربردی

مطالعه بیشتر
آموزش CSS Blend Modes: ادغام رنگ‌ها و تصاویر برای طراحی وب جذاب
18م شهریور 1402

آموزش CSS Blend Modes: ادغام رنگ‌ها و تصاویر برای طراحی وب جذاب

مطالعه بیشتر
واحدهای CSS مدرن: آموزش استفاده از vw، vh، vmin و vmax برای طراحی واکنش‌گرا
11م آبان 1403

واحدهای CSS مدرن: آموزش استفاده از vw، vh، vmin و vmax برای طراحی واکنش‌گرا

مطالعه بیشتر
عملگرها و عبارات محاسباتی در جاوا اسکریپت: نحوه استفاده و کاربردهای مختلف
28م شهریور 1402

عملگرها و عبارات محاسباتی در جاوا اسکریپت: نحوه استفاده و کاربردهای مختلف

مطالعه بیشتر
آموزش کامل تفاوت echo و print در PHP به زبان ساده
21م خرداد 1405

آموزش کامل تفاوت echo و print در PHP به زبان ساده

مطالعه بیشتر
آموزش mix-blend-mode و background-blend-mode در CSS: ترکیب رنگ‌ها و ایجاد افکت‌های جذاب
12م آبان 1403

آموزش mix-blend-mode و background-blend-mode در CSS: ترکیب رنگ‌ها و ایجاد افکت‌های جذاب

مطالعه بیشتر
آموزش قالب‌بندی متن در HTML: استفاده از تگ‌ها و CSS برای استایل‌دهی
23م مرداد 1402

آموزش قالب‌بندی متن در HTML: استفاده از تگ‌ها و CSS برای استایل‌دهی

مطالعه بیشتر
آموزش ساخت افکت تصویر با تم اینستاگرام و انیمیشن چرخش دوره‌ای در CSS
13م خرداد 1405

آموزش ساخت افکت تصویر با تم اینستاگرام و انیمیشن چرخش دوره‌ای در CSS

مطالعه بیشتر

تمامی حقوق معتلق به ناشر سایت است و کپی از آن پیگرد قانونی دارد