29. معالجة الأخطاء في استدعاءات HTTP
ترجع واجهات API حتماً أخطاء (على سبيل المثال، 404 Not Found، 500 Server Error، 401 Unauthorized). يجب أن تتعامل التطبيقات القوية مع حالات الفشل هذه بأمان. نظراً لأن HttpClient يُرجع Observables، فإننا نستخدم عوامل RxJS، وتحديداً catchError و callback error في الاشتراك.
1. التعامل مع الأخطاء في الاشتراك
النهج الأساسي هو استخدام callback error المحدد في كائن subscribe (كما هو موضح سابقاً).
typescript this.dataService.getUsers().subscribe({ next: (data) => { /* success */ }, error: (httpError) => { // هذا يتعامل مع الأخطاء الناتجة عن الطلب (4xx أو 5xx) console.error('HTTP Error:', httpError); this.errorMessage = httpError.message; } });
2. استخدام عامل RxJS catchError (في الخدمة)
إذا كنت تريد التعامل مع الخطأ أو تحويله قبل أن يشترك المكون، استخدم عامل catchError، الذي يجب استيراده من rxjs/operators.
typescript // data.service.ts import { catchError } from 'rxjs/operators'; import { Observable, throwError } from 'rxjs'; import { HttpErrorResponse } from '@angular/common/http';
private handleError(error: HttpErrorResponse) {
let errorMessage = 'An unknown error occurred!';
if (error.error instanceof ErrorEvent) {
// خطأ من جانب العميل أو خطأ في الشبكة
errorMessage = Client Error: ${error.error.message};
} else {
// أعاد الواجهة الخلفية رمز استجابة غير ناجح.
errorMessage = Server Error: ${error.status} - ${error.message};
}
console.error(errorMessage);
// إرجاع Observable مع رسالة خطأ موجهة للمستخدم
return throwError(() => new Error(errorMessage));
}
getUsersWithCatch(): Observable<User[]> {
return this.http.get<User[]>(${this.baseUrl}/users-error-url).pipe(
// إضافة عامل catchError إلى سلسلة Observable
catchError(this.handleError)
);
}
من خلال التعامل مع الخطأ في الخدمة، يرى المكون تدفقاً واحداً فقط (إما بيانات ناجحة أو Observable الخطأ المخصص)، مما يبسط منطق المكون.