面试题：Angular中HttpClient模块获取数据时如何处理错误

Question

在Angular项目里使用HttpClient模块进行数据获取操作，假设后端接口偶尔会返回404错误，阐述如何通过代码优雅地捕获并处理这个错误，同时说明如何向用户展示友好的错误提示信息。

Answer 1

1. 捕获错误：
   • 在使用HttpClient发送请求时，可通过catchError操作符来捕获错误。首先要导入catchError和throwError：

   import { catchError, throwError } from 'rxjs';
   

   • 假设我们有一个服务来获取数据，例如：

   import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   
   @Injectable({
     providedIn: 'root'
   })
   export class DataService {
     constructor(private http: HttpClient) {}
   
     getData() {
       return this.http.get('/api/data')
        .pipe(
           catchError((error) => {
             if (error.status === 404) {
               // 处理404错误
               return this.handle404Error(error);
             }
             // 处理其他错误
             return throwError(error);
           })
         );
     }
   
     handle404Error(error: any) {
       // 这里可以进行一些日志记录等操作
       return throwError('The requested data was not found.');
     }
   }
   

2. 展示友好错误提示：
   • 在组件中订阅时处理：
     • 在组件中订阅数据服务的getData方法，并在订阅的error回调中展示错误信息。

     import { Component } from '@angular/core';
     import { DataService } from './data.service';
     
     @Component({
       selector: 'app - my - component',
       templateUrl: './my - component.html',
       styleUrls: ['./my - component.css']
     })
     export class MyComponent {
       data: any;
       errorMessage: string;
     
       constructor(private dataService: DataService) {}
     
       ngOnInit() {
         this.dataService.getData().subscribe({
           next: (result) => {
             this.data = result;
           },
           error: (error) => {
             this.errorMessage = error.message;
           }
         });
       }
     }
     

   • 在模板中展示：
     • 在组件的模板（my - component.html）中添加如下代码来展示错误信息：

     <div *ngIf="errorMessage" class="error - message">{{errorMessage}}</div>
     

   • 还可以通过Angular的ErrorHandler全局处理错误，在app.module.ts中定义全局错误处理：

   import { NgModule, ErrorHandler } from '@angular/core';
   import { BrowserModule } from '@angular/platform - browser';
   import { AppComponent } from './app.component';
   import { HttpClientModule } from '@angular/common/http';
   
   class GlobalErrorHandler implements ErrorHandler {
     handleError(error: any) {
       if (error.status === 404) {
         // 处理404错误，例如显示全局提示
         console.error('Global 404 error:', error);
       }
       // 处理其他错误
       console.error('Global error:', error);
     }
   }
   
   @NgModule({
     declarations: [AppComponent],
     imports: [BrowserModule, HttpClientModule],
     providers: [
       {
         provide: ErrorHandler,
         useClass: GlobalErrorHandler
       }
     ],
     bootstrap: [AppComponent]
   })
   export class AppModule {}
   

   • 然后可以通过在全局的styles.css中定义.error - message的样式来使错误提示更友好，例如：

   .error - message {
     color: red;
     font - weight: bold;
   }