از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
Handling Errors With AxiosAxios یک کتابخانه جاوا اسکریپت است که از Promise API برای ایجاد درخواست های HTTP با http در زمان اجرا Node.js یا XMLHttpRequests در مرورگر استفاده می کند. از آنجایی که این درخواست‌ها وعده هستند، با سینتکس جدیدتر async/await و همچنین توابع .then() برای زنجیره وعده و مکانیسم .catch کار می‌کنند…
سرفصلهای مطلب
معرفی
Axios یک کتابخانه جاوا اسکریپت است که از Promise API برای ایجاد درخواست های HTTP استفاده می کند http در زمان اجرا Node.js یا XMLHttpRequests در مرورگر از آنجا که این درخواست ها وعده داده می شوند ، آنها با Syntax جدیدتر Async/Await و همچنین کار می کنند .then() توابع برای زنجیره وعده و .catch() مکانیزم رسیدگی به خطا
try {
let res = await axios.get('/my-api-route');
// Work with the response...
} catch (err) {
// Handle error
console.log(err);
}
در این مقاله، روش رسیدگی به خطاها را با Axios خواهیم دید، زیرا این امر هنگام برقراری تماس‌های HTTP بسیار مهم است و به خوبی می‌دانیم که ممکن است زمان‌هایی وجود دارد که سرویسی که تماس می‌گیرید در دسترس نباشد یا خطاهای غیرمنتظره دیگری را برگرداند. ما نشان خواهیم داد
.then()/.catch()روش، اما در درجه اول از syntax async/wait استفاده کنید.
سپس و گرفتن
وعده ها را می توان به دو روش با استفاده از JS مدرن – Async/Await Syntax ، که در بالا نشان داده شد ، انجام داد. .then() و .catch() مواد و روش ها. توجه داشته باشید که هر دوی این روش‌ها می‌توانند عملکرد یکسانی را تولید کنند، اما async/wait معمولاً کار با آن آسان‌تر در نظر گرفته می‌شود و به کد دیگ بخار کمتری در زنجیره‌های وعده طولانی‌تر نیاز دارد.
در اینجا روش دستیابی به همان چیزها آورده شده است ، اما با استفاده از روش سپس/گرفتن:
axios.get('/my-api-route')
.then(res => {
// Work with the response...
}).catch(err => {
// Handle error
console.log(err);
});
هر دو res و err اشیاء همانند Syntax Async/Await هستند.
رسیدگی به خطاها
در این بخش، به دو دسته اصلی از مشکلات و همچنین سایر مسائلی که ممکن است با آنها برخورد کنیم و روش مدیریت آنها با استفاده از Axios خواهیم پرداخت. بسیار مهم است که شما درک کنید که این موضوع در مورد انواع نمایش داده های HTTP که توسط Axios انجام شده است ، صدق می کند GET، POST، PATCH، و غیره روی.
در اینجا می توانید نحو را برای سه جنبه مشاهده کنید – این خطا را ضبط می کند. توجه به این نکته بسیار مهم است که این خطا با اطلاعات زیادی با خطای بزرگ همراه است:
try {
let res = await axios.get('/my-api-route');
// Work with the response...
} catch (err) {
if (err.response) {
// The client was given an error response (5xx, 4xx)
} else if (err.request) {
// The client never received a response, and the request was never left
} else {
// Anything else
}
}
تفاوت در شیء خطا ، که در بالا برجسته شده است catch کد، نشان می دهد که در کجا درخواست با مشکل مواجه شده است. در بخش های بعدی بیشتر به این موضوع نگاه خواهیم کرد.
error.response
این نوع اشتباهی است که ما بیشتر با آن آشنا هستیم و مقابله با آن بسیار ساده تر است. بسیاری از سایت ها 404 یافت نشد را نمایش می دهند page/پیام خطا یا کدهای پاسخ مختلف بر اساس روی آنچه API ارائه می دهد؛ این اغلب از طریق پاسخ انجام می شود.
اگر شی خطای شما دارای خاصیت پاسخ باشد، به این معنی است که سرور شما یک خطای 4xx/5xx را برگردانده است. این به شما کمک می کند تا انتخاب کنید چه نوع پیامی را به کاربران بازگردانید. پیامی که می‌خواهید برای 4xx ارائه دهید ممکن است با پیام 5xx متفاوت باشد، و اگر باطن شما اصلاً چیزی را بر نمی‌گرداند.
try {
let res = await axios.get('/my-api-route');
// Work with the response...
} catch (err) {
if (err.response) {
// The client was given an error response (5xx, 4xx)
console.log(err.response.data);
console.log(err.response.status);
console.log(err.response.headers);
} else if (err.request) {
// The client never received a response, and the request was never left
} else {
// Anything else
}
}
error.request
این خطا معمولاً توسط یک شبکه بد/لکه‌دار ایجاد می‌شود، یک بک‌اند معلق که فوراً به هر درخواست پاسخ نمی‌دهد، درخواست‌های غیرمجاز یا بین دامنه‌ای، و در نهایت اگر API باطن یک خطایی را برگرداند.
توجه داشته باشید: این زمانی اتفاق می افتد که مرورگر بتواند درخواستی را آغاز کند اما به هر دلیلی پاسخ معتبری دریافت نکرده است.
try {
let res = await axios.get('/my-api-route');
// Work with the response...
} catch (err) {
if (err.response) {
// The client was given an error response (5xx, 4xx)
} else if (err.request) {
// The client never received a response, and the request was never left
console.log(err.request);
} else {
// Anything else
}
}
قبلاً اشاره کردیم که درخواست اساسی مورد استفاده Axios بستگی دارد روی محیطی که در آن اجرا می شود این نیز در مورد err.request هدف – شی. اینجا err.request شی نمونه ای از XMLHttpRequest زمانی که در مرورگر اجرا می شود، در حالی که نمونه ای از آن است http.ClientRequest هنگامی که در Node.js استفاده می شود.
سایر خطاها
این امکان وجود دارد که شی خطا هیچ یک از آنها را نداشته باشد response یا request شیء متصل به آن در این مورد به طور ضمنی گفته می شود که مشکلی در تنظیم درخواست وجود داشته است که در نهایت باعث بروز خطا می شود.
try {
let res = await axios.get('/my-api-route');
// Work with the response...
} catch (err) {
if (err.response) {
// The client was given an error response (5xx, 4xx)
} else if (err.request) {
// The client never received a response, and the request was never left
} else {
// Anything else
console.log('Error', err.message);
}
}
به عنوان مثال، اگر پارامتر URL را از قسمت حذف کنید، ممکن است اتفاق بیفتد .get() تماس بگیرید، و بنابراین هیچ درخواستی انجام نشد.
نتیجه
در این مقاله کوتاه، به روش مدیریت انواع خرابی ها و خطاها در Axios پرداختیم. این همچنین برای ارسال پیام صحیح به بازدیدکنندگان برنامه/وب سایت شما مهم است، نه اینکه همیشه یک پیام خطای عمومی، ارسال 404 یا نشان دادن مشکلات شبکه نشان داده شود.
(برچسب‌ها برای ترجمه)# جاوا اسکریپت
منتشر شده در 1403-01-11 03:11:03
