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

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

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

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

مطالعه بیشتر
ایجاد Layout‌های واکنش‌گرا با flex-direction و justify-content در CSS Flexbox: راهنمای جامع
11م آبان 1403

ایجاد Layout‌های واکنش‌گرا با flex-direction و justify-content در CSS Flexbox: راهنمای جامع

مطالعه بیشتر
تفاوت Data و Computed Properties در Vue.js | آموزش کاربردی و مثال‌محور
21م آذر 1404

تفاوت Data و Computed Properties در Vue.js | آموزش کاربردی و مثال‌محور

مطالعه بیشتر
راهنمای کامل تگ‌های متنی HTML و اصول سئو برای محتوا
18م مرداد 1402

راهنمای کامل تگ‌های متنی HTML و اصول سئو برای محتوا

مطالعه بیشتر
آموزش استفاده از position در CSS: نحوه موقعیت‌دهی عناصر در صفحات وب
9م آبان 1403

آموزش استفاده از position در CSS: نحوه موقعیت‌دهی عناصر در صفحات وب

مطالعه بیشتر
آموزش مدیریت Box Model و ترکیب اجزای آن با CSS: کنترل دقیق فاصله‌ها و ابعاد عناصر
5م شهریور 1402

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

مطالعه بیشتر
آموزش ساخت یک برنامه ساده با Fetch API در جاوا اسکریپت: راهنمای گام به گام
1م آبان 1403

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

مطالعه بیشتر
آموزش جامع و استاندارد کار با رشته‌ ها در PHP
27م تیر 1405

آموزش جامع و استاندارد کار با رشته‌ ها در PHP

مطالعه بیشتر
آموزش ساختار کامپوننت در Vue.js (راهنمای کامل همراه مثال)
15م مرداد 1404

آموزش ساختار کامپوننت در Vue.js (راهنمای کامل همراه مثال)

مطالعه بیشتر
آموزش تغییر المان‌های DOM: ویرایش متن، سبک‌ها و کلاس‌ها در جاوا اسکریپت - راهنمای کامل با مثال‌ها
2م آبان 1403

آموزش تغییر المان‌های DOM: ویرایش متن، سبک‌ها و کلاس‌ها در جاوا اسکریپت - راهنمای کامل با مثال‌ها

مطالعه بیشتر
آموزش جامع توابع داخلی و پرکاربرد PHP + مثال‌های عملی
16م تیر 1405

آموزش جامع توابع داخلی و پرکاربرد PHP + مثال‌های عملی

مطالعه بیشتر
آموزش ایجاد تگ‌های صفحه‌بندی در HTML و CSS: طراحی و استایل‌دهی pagination
29م مرداد 1402

آموزش ایجاد تگ‌های صفحه‌بندی در HTML و CSS: طراحی و استایل‌دهی pagination

مطالعه بیشتر

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