بروز خطا در برنامه، اجتناب ناپذیره و هر برنامه میتونه پر از خطاهای مختلف باشه. در این مقاله سعی می‌کنیم این خطاها رو با استفاده از دستورات try و catch مدیریت کنیم. برای شروع کار، با دستورات زیر محیط توسعه رو در مرورگر باز می‌کنیم.

• گوگل‌کروم: Ctrl+Shift+J یا Cmd+Opt+J
• فایرفاکس: Ctrl+Shift+K یا Cmd+Opt+K

ساختار Try & Catch

اول از همه ساختار try و catch رو بررسی کنیم. برای استفاده از این ساختار باید ۲ بلوک کد داشته باشیم. اولین بلوک مرتبط با try است و کد مد نظر ما رو اجرا می‌کنه و بلوک دوم مربوط به catch است که وظیفه مدیریت خطا در هنگام اجرای بلوک اول رو بر عهده داره.

try {
    // Code that we will 'try'
}
catch(error) {
    // Code that handles any potential errors
}

اولین خطا

خب اول از متد ()alert استفاده می‌کنیم تا یک متن رو به صورت پاپ‌آپ در مرورگر نمایش بدیم.

alert("Be a Hero");

با اجرای این کد، پیامی در مرورگر نمایش داده می‌شود.

تا اینجای کار هیچ خطایی مشاهده نکردیم اما حالا میخوام یک خطا در برنامه ایجاد کنم. برای این کار به جای متد ()alert از یه متد اشتباه استفاده می‌کنم.

alerting("Be a Hero");

خب همونطور که در شکل زیر می‌بینید برنامه با خطا مواجه شد و دلیلش هم اینه که متد ()alerting وجود نداره! من اشتباها(!!) تابعی رو فراخونی کردم که تعریف نشده بود و در نتیجه خطا ایجاد شد. حالا باید چه کار کنم؟

زمانی که یک خطا در جاوااسکریپت ایجاد میشه، در واقع یک شئی از Error ساخته و وجودش به مرورگر اعلام میشه. این شئی دارای ۳ پارامتر هست: خطا، نام فایلی که خطا در اون رخ داد و شماره خطی که خطا در اون قسمت ایجاد شد.

مدیریت خطا (Catch)

برای استفاده از بلوک‌های try & catch فقط کافیه کد برنامه رو در بلوک try بنویسیم و در بلوک catch خطای خودمون رو مدیریت کنیم.

try {
    alerting("Be Hero");
}
catch(error) {
    console.log(error);
}

زمانی که کد بالا را اجرا کنیم، خروجی زیر رو می‌بینیم.

شاید نتیجه کار شبیه به قبل باشه اما واقعا اینطور نیست. کاری که ما کردیم این بود که کنترل خطا رو به دست گرفتیم قبل از اینکه به دست مرورگر بیفته و حالا خیلی راحت می‌‎تونیم هر عملی رو بر روی خطای ایجاد شده انجام بدیم. مثلا به جای این که در کنسول نمایش بدیم، می‌تونیم یه متن مشخص رو توسط alert نمایش بدیم.

try {
    alerting("Be Hero");
}
catch(error) {
    alert("Oh! Some Custom Error Message!");
}

خروجی کد بالا رو در شکل زیر می‌بینید.

استفاده از Throw

با استفاده از این دستور می‌تونیم خطای ساختگی رو به همراه نام و پیغام آن ایجاد کنیم.

throw new Error('New Error');

حالا می‌تونیم با استفاده از این دستور در بلوک try خطاهای جدیدی بسازیم و قطعه کد خودمون رو تست کنیم. (برای سادگی بیشتر به جای error از e استفاده کردم)

try {
    throw new Error('New Error');
}
catch(e) {
    console.log(e);
}

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

دستور Finally

کدهای بلوک finally بعد از اجرای بلوک try و catch اجرا میشه و داشتن یا نداشتن خطا تاثیری تو اجرای این بلوک نداره.

try {
  // Code that we will 'try'
}
catch(error) {
  // Code that handles any potential errors
}
finally {
  // Code that will run at the end
}

برای درک بیشتر مساله یک نمونه کد به همراه خطا و یک نمونه کد بدون خطا مثال می‌زنیم.

همراه خطا:

try {
  throw new Error('New Error');
}
catch(e) {
}
finally {
  console.log('finally running');
}
// finally running

بدون خطا:

try {
}
catch(e) {
}
finally {
  console.log('finally running');
}
// finally running

همونطور که می‌بینید در هر دو صورت بلوک finally اجرا میشه.

مثال آخر

یک مثال ساده که از هر ۳ بلوک در کنار هم استفاده می‌کنیم.

try {
  let hero = prompt("Type hero");
  if (hero !== 'hero'){
    throw new Error("Oops, you didn't type hero");
  }
}
catch(e) {
  alert(e.message);
}
finally {
  alert('Goodbye');
}

کد به این صورت هست که ابتدا از کاربر درخواست میشه تا کلمه hero رو وارد کنه و در صورت وارد کردن چیزی غیر از این، خطایی مشخص نمایش داده بشه و در نهایت پیامی برای خداحافظی با کاربر، توسط بلوک finally نمایش داده میشه.

با استفاده از بلوک‌های try و catch می‌تونیم به صورت درست و حرفه‌ای کاربر رو از خطاهای غیرقابل پیشبینی دور نگه داریم.