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

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

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

مدیریت خطاها در 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 به شما این امکان را می‌دهد تا خطاها را به شکلی منطقی و مؤثر مدیریت کنید و از مشکلات اجرایی جلوگیری کنید. با درک و پیاده‌سازی صحیح این تکنیک‌ها، می‌توانید برنامه‌های پایدارتر و قابل‌اعتمادتری بنویسید و تجربه کاربری بهتری ارائه دهید.

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

استفاده از Flexbox در CSS برای چیدمان‌های مدرن: راهنمای جامع و کاربردی

استفاده از Flexbox در CSS برای چیدمان‌های مدرن: راهنمای جامع و کاربردی

10م آبان 1403

مطالعه بیشتر

آموزش کار با Webpack و Bundlers برای مدیریت پروژه‌ها: راهنمای جامع و کاربردی

آموزش کار با Webpack و Bundlers برای مدیریت پروژه‌ها: راهنمای جامع و کاربردی

5م آبان 1403

مطالعه بیشتر

معرفی DOM و اصول آن در جاوا اسکریپت: راهنمای جامع برای مبتدیان

معرفی DOM و اصول آن در جاوا اسکریپت: راهنمای جامع برای مبتدیان

1م آبان 1403

مطالعه بیشتر

کار با تصاویر SVG در CSS: کنترل استایل و استفاده از گرافیک‌های مقیاس‌پذیر

کار با تصاویر SVG در CSS: کنترل استایل و استفاده از گرافیک‌های مقیاس‌پذیر

16م آبان 1403

مطالعه بیشتر

استفاده از font face در CSS برای اضافه کردن فونت‌های سفارشی: راهنمای کامل

استفاده از font face در CSS برای اضافه کردن فونت‌های سفارشی: راهنمای کامل

16م آبان 1403

مطالعه بیشتر

JSX و رندرینگ مؤثر در React.js: بهینه‌سازی کامپوننت‌ها و بهبود عملکرد

JSX و رندرینگ مؤثر در React.js: بهینه‌سازی کامپوننت‌ها و بهبود عملکرد

28م شهریور 1402

مطالعه بیشتر

آموزش Responsive Design با استفاده از Media Queries: طراحی واکنش‌گرا برای تمامی دستگاه‌ها

آموزش Responsive Design با استفاده از Media Queries: طراحی واکنش‌گرا برای تمامی دستگاه‌ها

10م شهریور 1402

مطالعه بیشتر

مفاهیم پیشرفته در کلاس‌ها و وراثت (Super, Extends) در جاوا اسکریپت: راهنمای کامل و مثال‌ها

مفاهیم پیشرفته در کلاس‌ها و وراثت (Super, Extends) در جاوا اسکریپت: راهنمای کامل و مثال‌ها

29م مهر 1403

مطالعه بیشتر

آموزش طراحی و استایل‌دهی جدول‌ها در CSS: راهنمای ساده و کاربردی

آموزش طراحی و استایل‌دهی جدول‌ها در CSS: راهنمای ساده و کاربردی

10م شهریور 1402

مطالعه بیشتر

آموزش ترانزیشن‌ها و انیمیشن‌های نرم با CSS: ایجاد افکت‌های پویا و واکنش‌گرا

آموزش ترانزیشن‌ها و انیمیشن‌های نرم با CSS: ایجاد افکت‌های پویا و واکنش‌گرا

10م شهریور 1402

مطالعه بیشتر

نصب Vue.js و ایجاد پروژه ساده: آموزش گام‌به‌گام راه‌اندازی Vue

نصب Vue.js و ایجاد پروژه ساده: آموزش گام‌به‌گام راه‌اندازی Vue

28م شهریور 1402

مطالعه بیشتر

آموزش ساخت یک گالری تصویر با استفاده از جاوا اسکریپت: راهنمای گام به گام

آموزش ساخت یک گالری تصویر با استفاده از جاوا اسکریپت: راهنمای گام به گام

3م آبان 1403

مطالعه بیشتر

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