Angular中处理“Provided data source did not match...”错误的问题

问题场景 #

获取存在/不存在的记录时，后端返回两种不同格式的响应，但HTTP状态码均为200：

• 存在记录时返回ToDoTask[]数组
• 不存在记录时返回包含错误信息的对象

由于状态码都是200，HttpClient会将两种响应都视为成功，无法触发subscribe的error回调。且所用API服务由OpenAPI Generator自动生成，不可手动修改。当前在TableViewComponent的getTasks方法中尝试通过同步throw Error触发错误，但存在优化空间。

解决方案 #

利用RxJS操作符在响应流中手动识别业务错误，并将其转换为Observable错误通知，从而让error回调能够捕获处理。

1. 基础实现：在pipe中处理响应并抛出错误 #

修改getTasks方法，通过map操作符提前校验响应格式，不符合预期时抛出错误：

getTasks() {
  this.toDoTasksService
    .tasksGet(this.currentlySelectedTable.id)
    .pipe(
      takeUntil(this.subscribe$),
      map(response => {
        // 校验响应是否为预期的数组格式
        if (Array.isArray(response)) {
          return response;
        }
        // 将业务错误转换为RxJS错误流
        throw new Error(response.title);
      })
    )
    .subscribe({
      next: (tasks: ToDoTask[]) => {
        this.tasks = tasks;                    
      },
      error: (error) => {
        console.error('获取任务失败:', error);
        // 这里可添加UI错误提示，比如弹出消息、更新页面状态
      },
    });
}

2. 优化：自定义业务错误类 #

如果后端错误响应有固定结构（如包含title、detail等字段），可以定义专属错误类，让错误处理更清晰：

// 自定义业务错误类
export class BusinessError extends Error {
  constructor(public title: string, public detail?: string) {
    super(title);
    this.name = 'BusinessError';
  }
}

在map操作符中抛出自定义错误：

map(response => {
  if (Array.isArray(response)) {
    return response;
  }
  throw new BusinessError(response.title, response.detail);
})

在error回调中区分错误类型：

error: (error) => {
  if (error instanceof BusinessError) {
    console.error('业务错误:', error.title, error.detail);
    // 针对业务错误的专属UI处理，比如展示友好提示
  } else {
    console.error('网络或系统错误:', error);
    // 通用错误处理逻辑
  }
}

3. 进阶：封装通用RxJS操作符 #

如果多个接口都存在类似的业务错误处理需求，可以封装一个通用操作符，避免重复代码：

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

// 通用业务错误处理操作符
export function handleBusinessError<T>(
  isValid: (response: any) => boolean,
  getError: (response: any) => Error
) {
  return (source: Observable<any>): Observable<T> => {
    return source.pipe(
      map(response => {
        if (isValid(response)) {
          return response as T;
        }
        throw getError(response);
      })
    );
  };
}

使用示例：

getTasks() {
  this.toDoTasksService
    .tasksGet(this.currentlySelectedTable.id)
    .pipe(
      takeUntil(this.subscribe$),
      handleBusinessError<ToDoTask[]>(
        res => Array.isArray(res),
        res => new BusinessError(res.title)
      )
    )
    .subscribe({
      next: (tasks) => this.tasks = tasks,
      error: (error) => console.error(error)
    });
}

核心原理 #

因为后端返回200状态码，HttpClient不会将其标记为错误，所有响应都会进入next回调。通过在RxJS流中提前校验响应格式，将不符合业务预期的响应手动抛出为错误，就能让error回调捕获并处理这类业务错误，同时保持代码的可维护性。

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