Angular中如何为GET模拟请求添加HttpErrorResponse对象？

我明白你遇到的困扰了——在Angular的HTTP测试里，直接用request.error()生成的HttpErrorResponse没办法带上自定义的error.errorType字段，对吧？别担心，咱们换一种方式手动构造错误响应，就能轻松搞定这个问题。

核心思路 #

原来的request.error()方法主要用来模拟网络层面的错误（比如连接超时、DNS解析失败），它生成的HttpErrorResponse的error属性是ErrorEvent对象，没法直接添加自定义字段。而如果我们需要模拟后端返回的HTTP错误响应（比如500状态码带自定义错误信息），应该用request.flush()方法，它允许我们传入自定义的错误payload，这些内容会被自动包装到HttpErrorResponse的error属性中。

修改后的测试代码 #

import { HttpErrorResponse } from '@angular/common/http';

// ... 其他测试依赖和初始化代码

it('should call showError method', () => { 
  httpClient.get('url').subscribe( 
    result => {}, 
    (err: HttpErrorResponse) => { 
      expect(timeoutService.showError).toHaveBeenCalled();
      // 可选：验证自定义的errorType是否符合预期
      expect(err.error.errorType).toBe('TIMEOUT');
    } 
  ); 

  const request = httpMock.expectOne('url'); 
  // 构造包含errorType的自定义错误payload
  const customError = {
    errorType: 'TIMEOUT',
    message: '请求超时，请稍后重试' // 可按需添加其他错误字段
  };
  // 用flush方法发送错误响应，同时指定状态码和状态文本
  request.flush(customError, {
    status: 500,
    statusText: 'Internal Server Error'
  });
});

代码说明 #

1. 导入HttpErrorResponse：虽然不需要手动实例化，但导入它能在错误回调里提供类型提示，让代码更清晰。
2. 自定义错误payload：这里我们定义了errorType: 'TIMEOUT'，你可以根据业务需求添加任何其他错误字段。
3. 使用request.flush()发送错误：第一个参数是自定义的错误内容，第二个参数是响应的状态信息。这样在订阅的错误回调里，err.error就会包含我们定义的errorType字段了。

额外提示 #

如果你的拦截器需要同时处理网络错误和HTTP错误响应，可以拆分测试用例：

• 用request.error()测试网络错误场景（比如断网、连接失败）
• 用request.flush()测试后端返回的HTTP错误场景（比如404、500带自定义信息）

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