Angular4中如何处理服务器返回HttpStatus或数据列表的响应？

我来帮你梳理下这个需求的实现思路，核心就是在Angular的HandlerService里区分正常数据响应和错误状态码，然后分别处理。结合你后端的接口逻辑（返回列表或404状态码），具体实现步骤如下：

1. 搭建HandlerService基础结构 #

首先确保项目已导入HttpClientModule（Angular 4+推荐用HttpClient替代旧版Http），然后在服务中注入HttpClient：

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root' // Angular 4+ 便捷的服务提供方式
})
export class HandlerService {
  private apiUrl = '/test'; // 对应后端接口地址

  constructor(private http: HttpClient) { }
}

2. 编写请求方法并处理响应/错误 #

后端返回HttpStatus.NOT_FOUND时，Spring Boot会返回404状态码，这在Angular的HttpClient中会被判定为错误响应。我们可以用catchError操作符捕获该错误，同时处理正常的列表数据：

getTestData(): Observable<any[]> {
  return this.http.get<any[]>(this.apiUrl).pipe(
    catchError((error: HttpErrorResponse) => {
      // 精准判断404状态码
      if (error.status === 404) {
        // 抛出提示信息，示例用alert，实际可替换为Angular Material的SnackBar等组件
        alert('请求的资源不存在');
        // 可根据需求返回空Observable或重新抛出错误
        return throwError(() => new Error('资源不存在'));
      }
      // 处理其他未知错误
      alert(`请求出错：${error.message}`);
      return throwError(() => new Error(error.message));
    })
  );
}

3. 组件中调用服务并处理数据 #

组件订阅服务方法后，正常流程接收列表数据，错误情况会被服务层统一处理，也可在组件内补充额外逻辑：

import { Component, OnInit } from '@angular/core';
import { HandlerService } from './handler.service';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html'
})
export class TestComponent implements OnInit {
  dataList: any[] = [];

  constructor(private handlerService: HandlerService) { }

  ngOnInit(): void {
    this.handlerService.getTestData().subscribe({
      next: (data) => {
        // 正常返回列表时，将数据传递给组件变量
        this.dataList = data;
        console.log('获取到数据列表：', this.dataList);
      },
      error: (err) => {
        // 组件侧额外处理错误，比如更新页面状态
        console.error('请求失败：', err);
      }
    });
  }
}

关键说明 #

• 为什么用catchError：后端返回404状态码时，HttpClient不会进入next回调，而是直接触发error回调，所以我们在服务层统一捕获错误、处理提示逻辑，让组件只专注于正常数据的展示。
• 提示优化：示例用了简单的alert，实际项目建议用更友好的UI组件（如Angular Material的MatSnackBar）来提升用户体验。
• 类型安全：如果你的列表有明确的数据结构，可以把any[]替换为自定义接口类型（比如User[]），让代码更严谨。

内容的提问来源于stack exchange，提问作者j6wj1997