Angular 14执行操作成功却始终提示错误，求解决方案

问题原因 #

核心问题是Angular HttpClient的默认响应判断逻辑：当后端返回无响应体的成功状态码（比如204 No Content）时，HttpClient会将其判定为错误，触发err回调，导致弹出错误提示，即便实际操作已经成功。

解决步骤 #

1. 规范Spring Boot后端接口的响应 #

确保删除/新增接口在操作成功时返回符合REST规范的状态码：

• 操作成功且有返回数据：返回200 OK并携带响应体
• 操作成功但无返回数据（比如删除）：返回204 No Content，不要返回响应体

示例Spring Boot删除接口代码：

@DeleteMapping("/experiencia/{id}")
public ResponseEntity<Void> deleteExperiencia(@PathVariable Long id) {
    experienciaService.delete(id);
    return ResponseEntity.noContent().build(); // 正确返回204状态码
}

2. 修改Angular前端的订阅逻辑 #

通过observe: 'response'获取完整响应对象，手动判断状态码是否属于成功范围（200-299），避免误判为错误：

修改后的TypeScript代码：

delete(id: number) {
  if (id !== undefined) {
    this.sExperiencia.delete(id, { observe: 'response' }).subscribe(
      (response) => {
        if (response.status >= 200 && response.status < 300) {
          this.cargarExperiencia();
          // 建议移除window.location.reload()，改用更新本地数据提升体验
          // window.location.reload();
        } else {
          alert("failed to delete component");
          window.location.reload();
        }
      },
      (err) => {
        alert("failed to delete component");
        window.location.reload();
      }
    );
  }
}

3. 优化用户体验（可选） #

避免使用window.location.reload()刷新整个页面，直接更新本地数据即可：

delete(id: number) {
  if (id !== undefined) {
    this.sExperiencia.delete(id, { observe: 'response' }).subscribe(
      (response) => {
        if (response.status >= 200 && response.status < 300) {
          // 直接从本地数据数组中移除对应元素
          this.experiencias = this.experiencias.filter(item => item.id !== id);
          // 或者重新调用接口获取最新数据
          // this.cargarExperiencia();
        } else {
          alert("failed to delete component");
        }
      },
      (err) => {
        alert("failed to delete component");
      }
    );
  }
}

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