Angular项目中如何在模态框展示后端抛出的异常信息

后端返回现状 #

你的后端已经针对上传异常做了正确的响应处理：

• 当指定模板不存在时，返回404 NOT_FOUND状态码，携带消息Template not found
• 当模板无法读取时，返回406 NOT_ACCEPTABLE状态码，携带具体的异常消息

接下来只需在Angular前端捕获这些错误响应，通过模态框展示给用户即可。

Angular前端处理步骤 #

1. 封装上传请求并捕获错误 #

在Angular服务中，用HttpClient发送文件上传请求，同时通过catchError统一处理错误：

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

@Injectable({
  providedIn: 'root'
})
export class UploadService {
  constructor(private http: HttpClient) {}

  uploadFile(formData: FormData) {
    return this.http.post('/api/validateUpload', formData)
      .pipe(
        catchError(this.handleUploadError)
      );
  }

  private handleUploadError(error: HttpErrorResponse) {
    let errorMsg = '未知上传错误';
    if (error.error instanceof ErrorEvent) {
      // 处理客户端/网络层面的错误
      errorMsg = `客户端错误: ${error.error.message}`;
    } else {
      // 提取后端返回的错误消息
      errorMsg = error.error || `服务器错误 [${error.status}]: ${error.statusText}`;
    }
    return throwError(() => new Error(errorMsg));
  }
}

2. 组件中调用服务并触发模态框 #

在上传组件里，调用上传服务，订阅请求结果，捕获错误后打开模态框展示消息：

import { Component } from '@angular/core';
import { UploadService } from './upload.service';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; // 以NG Bootstrap模态框为例，可替换为你项目使用的模态框组件

@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html'
})
export class FileUploadComponent {
  selectedFile: File | null = null;
  uploadType: string = '';
  aquiName: string = '';

  constructor(
    private uploadService: UploadService,
    private modalService: NgbModal
  ) {}

  onFileSelected(event: Event) {
    const target = event.target as HTMLInputElement;
    this.selectedFile = target.files?.[0] || null;
  }

  onUpload(errorModalTemplate: any) {
    if (!this.selectedFile) return;

    const formData = new FormData();
    formData.append('file', this.selectedFile);
    formData.append('uploadType', this.uploadType);
    formData.append('aquiName', this.aquiName);

    this.uploadService.uploadFile(formData).subscribe({
      next: (res) => {
        // 处理上传成功逻辑
        console.log('上传验证通过', res);
      },
      error: (err) => {
        // 打开模态框并传递错误消息
        const modalRef = this.modalService.open(errorModalTemplate, { centered: true });
        modalRef.componentInstance.errorMessage = err.message;
      }
    });
  }
}

3. 编写模态框HTML模板 #

在组件的HTML中添加上传表单和错误提示模态框：

<!-- 上传表单 -->
<div class="upload-form">
  <input type="file" (change)="onFileSelected($event)">
  <input type="text" [(ngModel)]="uploadType" placeholder="上传类型">
  <input type="text" [(ngModel)]="aquiName" placeholder="Aqui名称">
  <button (click)="onUpload(errorModal)" [disabled]="!selectedFile">上传验证</button>
</div>

<!-- 错误提示模态框 -->
<ng-template #errorModal let-modal>
  <div class="modal-header">
    <h5 class="modal-title">上传失败</h5>
    <button type="button" class="close" (click)="modal.dismiss()">
      <span>&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>{{ errorMessage }}</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="modal.close()">关闭</button>
  </div>
</ng-template>

注意事项 #

• 确保项目已导入HttpClientModule（在AppModule的imports数组中添加）
• 若使用其他UI库的模态框（如Angular Material），只需替换对应的模态框调用逻辑即可
• 后端返回的所有错误消息都会被前端捕获并展示，无需额外修改后端代码

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