如何在React.js中处理并展示SpringBoot API的响应（含校验）

1. 修正请求订阅逻辑，处理成功与错误状态 #

当前代码的核心问题是无论请求成功失败都会立即跳转页面，且未处理错误状态。需要将跳转逻辑移到成功回调内，并添加错误回调捕获BAD_REQUEST等异常：

signUp() {
  this.signUpOff.activityId = this.activity.id;
  this.signUpOff.fid = this.fid;
  
  this.service.Signup(this.signUpOff).subscribe({
    // 处理HTTP 200 OK的成功场景
    next: (responseMessage) => {
      alert(responseMessage); // 展示成功提示
      this.router.navigate(['/ownActivity']); // 成功后再执行页面跳转
    },
    // 处理HTTP 400 BAD_REQUEST等错误场景
    error: (error) => {
      // 从错误对象中提取后端返回的自定义消息，兜底默认提示
      const errorMsg = error.error || '请求出错，请稍后重试';
      alert(errorMsg); // 展示错误提示
      // 错误时不跳转，留在当前页面方便用户重新操作
    }
  });
}

2. 优化消息展示（可选，替代原生alert） #

如果需要更友好的页面提示，可通过组件状态渲染样式化消息：

第一步：在组件类中定义状态

// 存储提示文本
public toastMessage: string = '';
// 标记消息类型，用于区分样式
public messageType: 'success' | 'error' = 'success';

第二步：修改订阅回调更新状态

signUp() {
  this.signUpOff.activityId = this.activity.id;
  this.signUpOff.fid = this.fid;
  
  this.service.Signup(this.signUpOff).subscribe({
    next: (responseMessage) => {
      this.toastMessage = responseMessage;
      this.messageType = 'success';
      // 3秒后自动清除消息
      setTimeout(() => this.toastMessage = '', 3000);
      this.router.navigate(['/ownActivity']);
    },
    error: (error) => {
      this.toastMessage = error.error || '请求出错，请稍后重试';
      this.messageType = 'error';
      setTimeout(() => this.toastMessage = '', 3000);
    }
  });
}

第三步：在组件模板中渲染提示

<!-- 提示消息容器 -->
<div *ngIf="toastMessage" 
     class="toast"
     [ngClass]="{'toast-success': messageType === 'success', 'toast-error': messageType === 'error'}">
  {{ toastMessage }}
</div>

第四步：添加CSS样式

.toast {
  padding: 12px 20px;
  border-radius: 4px;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
}
.toast-success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}
.toast-error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

3. 后端代码优化建议（可选） #

当前后端代码中activity.get()可能抛出NoSuchElementException（活动不存在时），建议提前判断Optional是否为空，避免未捕获异常：

Optional<Activity> activity = this.activityService.getActivity(String.valueOf(activitySignUp.getActivityId()));
if(activity.isEmpty()) {
    return new ResponseEntity<>("活动不存在", HttpStatus.BAD_REQUEST);
}
// 后续安全使用activity.get()
List<Account_Activity> accountActivities = this.activityService.accountActivities(activitySignUp.getActivityId());
if(accountActivities.size() < activity.get().getMaxParticipants()) {
    this.activityService.signUp(activitySignUp, true);
    return new ResponseEntity<>("Sign up for activity successful", HttpStatus.OK);
}

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