Artikel ini akan membawa anda melalui pengecualian pengendalian ErrorHandler dalam sudut, dan memperkenalkan penggunaan ErrorHandler melalui contoh. Pelaksanaan lalai
ErrorHandler
mencetak mesej ralat keconsole
. Untuk memintas pengendalian ralat, tulis pengendali pengecualian tersuai yang akan mengubah tingkah laku lalai ini kepada perkara yang diperlukan oleh aplikasi anda. [Tutorial berkaitan yang disyorkan: "tutorial sudut"]
Menunjukkan penggunaan dengan contoh dalam pembangunan sebenar:
Jika bahagian hadapan mempunyai keperluan baharu, tambahkan ralat global kepada Proses bahagian hadapan dan laporkan log ralat seperti berikut:
1 Cipta pengendalian ralat error-handler.service.ts
import { HttpClient } from '@angular/common/http'; import { ErrorHandler, Injectable } from '@angular/core'; @Injectable() export class AppGlobalErrorhandler implements ErrorHandler { constructor(private http:HttpClient){ } // 当程序中出现异常时,会自动调用 handleError 钩子,可判断是客户端还是来自服务端的异常。 handleError(error) { // 打印错处信息 console.warn("customize catch execption:" , error.stack); // ... // 异常处理逻辑 // ... if(['ExpressionChangedAfterItHasBeenCheckedError'].every(item => !error.stack.includes(item))){ // 上报错误日志 this.http.post('/api/errorLog', { url: location.href, type: 'WEB', error: error.stack, message: error.toString() }).subscribe() } } }
2. Tambah app.module.ts
import { AppGlobalErrorhandler } from './service/error-handler.service'; ... providers: [ ... { provide: ErrorHandler, useClass: GlobalErrorHandler}, ... ]
Apabila pengecualian berlaku dalam program, cangkuk
handleError
akan dipanggil secara automatik untuk menentukan sama ada pengecualian adalah daripada klien atau pelayan.
3. Apa yang dikendalikan di atas adalah pengecualian yang berlaku pada halaman Dalam pembangunan sebenar, pengecualian seperti antara muka juga perlu dilaporkan pada masa ini, rangka kerja ng-alain
digunakan pemintas default.interceptor.ts
Tambah kod, sila rujuk: ng-alain—pemintasan permintaan rangkaian
private handleData( event: HttpResponse<any> | HttpErrorResponse, data?:any ): Observable<any> { // 判断是否为错误实例 if (event instanceof HttpErrorResponse && event.url.indexOf('api/errorLog') === -1) { // 上报接口错误日志 this.http.post('/api/errorLog', { url: event.url, type: 'INTERFACE', message: event.message, status: event.status, statusText: event.statusText, param: JSON.stringify(data['body']||undefined), body: JSON.stringify((event as any)['body'] || undefined), error:JSON.stringify( event.error), }).subscribe() } return of(event); } // 拦截器 intercept( req: HttpRequest<any>, next: HttpHandler, ){ return next.handle(newReq).pipe( // 当请求发生错误时,使用一个管道把错误发送给错误处理器 catchError((err: HttpErrorResponse) => this.handleData(err,newReq)), mergeMap((event: any) => { // 允许统一对请求错误处理,这是因为一个请求若是业务上错误的情况下其HTTP请求的状态是200的情况下需要 if (event instanceof HttpResponse && event.status === 200) return this.handleData(event); // 若一切都正常,则后续操作 return of(event); }), ); }
Kaedah penulisan dalam titik 3 di atas tidak secara automatik memanggil cangkuk handleError
untuk mengendalikan ralat, tetapi dalam Interceptor
pemintas Hanya HttpErrorResponse
ralat jenis boleh dikendalikan Jika dikendalikan di sini, ErrorHandler
tidak akan ditangkap. Jadi dalam Interceptor
, jika anda mesti menggunakan fungsi cangkuk handleError
untuk mengendalikan ralat, maka anda perlu membuang ralat taip HttpErrorResponse
. Seperti berikut:
catchError((error: HttpErrorResponse) => { if (error.status === 401) { // 跳到登录页或者刷新token } else { return throwError(error); } })
Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !
Atas ialah kandungan terperinci Mari kita bincangkan tentang ErrorHandler dalam sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!