面试题：Angular中如何处理HTTP请求响应的错误

Question

在Angular项目中，使用`HttpClient`发起HTTP请求后，如果响应出现错误（比如404、500等状态码），请描述常见的处理方式，并举例说明如何捕获并处理这些错误，包括如何在组件中显示友好的错误提示信息。

Answer 1

1. 常见处理方式：
   • 全局错误处理：可以在应用级别设置一个统一的错误处理机制，捕获所有HTTP请求的错误，这样可以保证处理逻辑的一致性。
   • 局部错误处理：在每个需要发起HTTP请求的组件中单独处理错误，这种方式更灵活，能根据组件的具体需求定制错误处理逻辑。
2. 捕获并处理错误示例： 首先，在组件中引入HttpClient和catchError操作符：

   import { Component } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { catchError } from 'rxjs/operators';
   import { throwError } from 'rxjs';
   

   然后，在组件类中定义一个方法发起HTTP请求并处理错误：

   @Component({
     selector: 'app - my - component',
     templateUrl: './my - component.html'
   })
   export class MyComponent {
     errorMessage: string = '';
     constructor(private http: HttpClient) {}
     makeRequest() {
       this.http.get('your - api - url')
        .pipe(
           catchError((error) => {
             this.errorMessage = '请求出现错误，请稍后重试。';
             // 这里可以根据不同的HTTP状态码进行更详细的处理
             if (error.status === 404) {
               this.errorMessage = '请求的资源未找到。';
             } else if (error.status === 500) {
               this.errorMessage = '服务器内部错误。';
             }
             return throwError(error);
           })
         )
        .subscribe((response) => {
           // 处理正常响应
           console.log(response);
         });
     }
   }
   

3. 在组件中显示友好错误提示信息： 在组件的模板文件（my - component.html）中添加如下代码：

   <div *ngIf="errorMessage" class="error - message">{{errorMessage}}</div>
   <button (click)="makeRequest()">发起请求</button>
   

   这里假设error - message类有相应的CSS样式来显示友好的错误提示外观，比如：

.error - message { color: red; padding: 10px; border: 1px solid red; border - radius: 5px; margin - top: 10px; }