如何在 Angular 中处理 HTTP 请求的错误？

推荐答案

在 Angular 中处理 HTTP 请求的错误通常使用 HttpClient 模块，并结合 RxJS 的 catchError 操作符来捕获和处理错误。以下是一个典型的错误处理示例：

// www.javascriptcn.com code example
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { catchError, throwError } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get('https://api.example.com/data').pipe(
      catchError(this.handleError)
    );
  }

  private handleError(error: HttpErrorResponse) {
    if (error.status === 0) {
      // 客户端或网络错误
      console.error('An error occurred:', error.error);
    } else {
      // 后端返回了一个不成功的响应代码
      console.error(
        `Backend returned code ${error.status}, body was: `, error.error);
    }
    // 返回一个带有用户友好错误信息的 observable
    return throwError(() => new Error('Something bad happened; please try again later.'));
  }
}

本题详细解读

1. 使用 HttpClient 发送请求

在 Angular 中，HttpClient 是用于发送 HTTP 请求的核心服务。通过依赖注入的方式，我们可以在服务类中使用 HttpClient 来发送 GET、POST 等请求。

2. 使用 catchError 捕获错误

catchError 是 RxJS 中的一个操作符，用于捕获 observable 流中的错误。当 HTTP 请求失败时，catchError 会捕获到错误，并允许我们对错误进行处理。

3. 处理不同类型的错误

在 handleError 方法中，我们可以根据 HttpErrorResponse 对象的不同属性来处理不同类型的错误。例如：

• error.status === 0 表示客户端或网络错误。
• error.status 为其他值时，表示后端返回了一个不成功的响应代码。

4. 返回用户友好的错误信息

在捕获并处理错误后，我们通常会返回一个带有用户友好错误信息的 observable。这可以通过 throwError 操作符来实现，它会将错误重新抛出，以便在组件中进一步处理或显示给用户。

5. 在组件中订阅并处理错误

在组件中调用服务方法时，可以通过订阅来处理成功和错误的情况：

this.dataService.getData().subscribe({
  next: (data) => {
    console.log('Data received:', data);
  },
  error: (error) => {
    console.error('Error occurred:', error);
  }
});

通过这种方式，我们可以在 Angular 应用中有效地处理 HTTP 请求中的错误，并为用户提供友好的反馈。