مدیریت خطای Angular
شناسه پست: 3926
بازدید: 98

هنگام ارسال request ها به سرور web API خود، امکان دارد در پاسخ با خطا مواجه شویم. بنابراین، استفاده از مدیریت خطای Angular برای رسیدگی به این خطاها در هنگام ارسال درخواست‌های HTTP ضروری است. این دقیقاً همان کاری است که ما در این پست می خواهیم انجام دهیم. اگر خطای 404 یا 500 را دریافت کنیم، کاربر را به صفحه خاصی هدایت می کنیم. برای سایر خطاها، ما یک پیام خطا را به صورت یک modal نشان می دهیم. صفحه ای که خطای 404 را handle می کند قبلاً ایجاد شده است، بنابراین، اجازه دهید با ایجاد یک component 500 (Internal server error) به کار خود ادامه دهیم.

ایجاد Internal Server Error Component

در پوشه error-pages با تایپ دستور AngularCLI یک component جدید ایجاد می کنیم:

سپس، اجازه دهید internal-server.component.ts را به این صورت تغییر دهیم:

سپس فایل internal-server.component.html را تغییر میدهیم:

علاوه بر این، ما فایل internal-server.component.css را نیز به این صورت اصلاح می کنیم:

در نهایت، آرایه routes را در فایل app-routing.module.ts تغییر میدهیم:

تمام.

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

ایجاد یک Service برای مدیریت خطای Angular

در پوشه shared/services، می‌خواهیم یک service جدید ایجاد کنیم و نام آن را Error-handler بگذاریم:

سپس، فایل error-handler.service.ts را به این صورت اصلاح میکنیم:

اینجا ابتدا Router را inject می کنیم که از آن در کد برای هدایت کاربر به صفحات دیگر استفاده می کنیم. در تابع ()handleError، کد وضعیت خطا را بررسی می کنیم و بر اساس آن متد private مناسب را برای رسیدگی به آن خطا فراخوانی می کنیم. توابع ()handle404Error و ()handle500Error مسئول set کردن ویژگی errorMessage هستند. ما قصد داریم از این ویژگی به عنوان یک پیام خطای modal یا یک پیام در صفحه خطا استفاده کنیم. ما بعداً با تابع ()handleOtherError همانطور که در comment جلوی آن نیز گفته شده است سروکار خواهیم داشت. اگر فایل owner-list.component.ts را به خاطر بیاورید، ما در آنجا، در حال گرفتن تمام owner ها از server هستیم. اما در آن فایل، مدیریت خطایی وجود ندارد. پس با تغییر فایل owner-list.component.ts، برای اجرای عملکرد مدیریت خطای Angular، به کار خود ادامه میدهیم:

تمام. باید توجه داشته باشیم که اکنون، اینجا یک آبجکت JSON را در داخل تابع subscribe داریم ارسال می کنیم. در صورت موفقیت آمیز بودن response، ویژگی next فعال خواهد شد و ویژگی error نیز error response را مدیریت می کند.

ما می توانیم با تغییر کد در متد GetAllOwners در سرور، آن را امتحان کنیم. به این منظور، فقط کافیست در خط اول، return NotFound() یا return StatusCode(500, “Some message”) را اضافه کنیم که در اینصورت، مطمئناً به صفحه خطای درست redirect خواهیم شد.

آماده سازی Owner-Details Component

کار خود را با ایجاد owner-details component ادامه میدهیم:

برای فعال کردن routing به این component، باید فایل owner-routing.module.ts را به این صورت تغییر دهیم:

همانطور که می بینید، این مسیر جدید دارای پارامتر id است. بنابراین وقتی روی دکمه Details کلیک می کنیم، این id را به مسیر خود منتقل می کنیم و owner مورد نظر را دقیقا با همین id در کامپوننت OwnerDetails دریافت می کنیم.

اما برای اینکه بتوانیم این کار را انجام دهیم، باید یک رابط جدید به پوشه interfaces_ اضافه کنیم:

و اینترفیس Owner را اصلاح میکنیم:

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

برای ادامه، اجازه دهید فایل owner-list.component.html را تغییر دهیم:

در رویداد کلیک، تابع getOwnerDetails را فراخوانی می کنیم و owner id را به عنوان پارامتر ارسال می کنیم. بنابراین باید این رویداد کلیک را در فایل owner-list.component.ts مدیریت کنیم.

ابتدا، یک عبارت import اضافه میکنیم:

سپس، ما می خواهیم سازنده را تغییر داده تا router را اضافه کنیم:

و تابع getOwnerDetails(id) را اضافه میکنیم:

ما اینجا، یک URI برای کامپوننت details خود با پارامتر id ایجاد کردیم و سپس تابع navigate را فراخوانی کرده تا به آن کامپوننت navigate کنیم.

در نهایت، فقط یک تابع دیگر برای دریافت یک owner واحد در داخل فایل owner-repository.service.ts اضافه میکنیم:

پیاده سازی Owner-Details Component

ما در حال حاضر، تمام کدها را برای پشتیبانی از کامپوننت owner-details داریم. اکنون زمان پیاده سازی business logic در داخل این component است.

ابتدا فایل owner-details.component.ts را اصلاح میکنیم:

این logic، تقریباً همان logic فایل owner-list.component.ts است، با این تفاوت که اکنون ActivatedRoute اینجا import شده است، زیرا باید id خود را از route دریافت کنیم.

پس از اجرای تابع getOwnerDetails، می‌خواهیم آبجکت owner را با تمام account های مرتبط در داخل ویژگی owner ذخیره کنیم.

تنها کاری که باید انجام دهیم این است که فایل owner-details.component.html را به این صورت اصلاح کنیم:

در اینجا، ما موجودیت owner را با تمام داده های مورد نیاز نمایش می دهیم. همچنین، اگر owner بیش از دو account داشته باشد، به صورت مشروط یک template متفاوت (advancedUser#) برای این فیلد نمایش می‌دهیم. در نهایت، ما تمام account های مربوط به این owner را نمایش می دهیم:

Beginner کاربر - مدیریت خطای Angular

همچنین می توانیم نگاهی به کاربر advanced نیز بیندازیم:

Advanced کاربر - مدیریت خطای Angular

نتیجه گیری

با خواندن این پست، یاد گرفتیم که چگونه با استفاده از مدیریت خطای Angular، خطاها را در یک service جداگانه مدیریت کنیم. همچنین برای نمایش داده های مختلف در صفحه با تمام جزئیات مورد نیاز، از HTML rendering به صورت شرطی استفاده کردیم.

در قسمت بعدی این آموزش گام به گام، می‌خواهم نحوه ایجاد component های فرزند و نحوه استفاده از Input ،@Output@ و EventEmitter ها در Angular را به شما نشان دهم. با انجام این کار، می‌خواهیم یاد بگیریم که component های خود را به بخش‌های کوچک‌تر تقسیم کنیم (رابطه والد-فرزند).

نویسنده

امید عباسی
من امید عباسی هستم. سالهاست که در زمینه برنامه نویسی با تکنولوژی دات نت فعالیت میکنم و عاشق این هستم که تجربیات و دانش خودم را در این زمینه با دیگران به اشتراک بزارم. خیلی دوست دارم که نظر و انتقاد خودتون رو در مورد این نوشته برای من بنویسید تا بتونم در آینده، مطالب بهتر و ارزشمندتری را برای شما فراهم کنم. در صورت داشتن هرگونه سوال هم در قسمت دیدگاه ها میتونید با بنده در ارتباط باشید