Angular13中Post请求用arrayBuffer响应类型时如何获取错误信息

问题核心：当你把请求的responseType设为arraybuffer后，Angular会把所有响应（包括错误响应）都以ArrayBuffer格式返回，所以原来直接访问error.error.message的方式失效——因为error.error现在是二进制数据，不是JSON对象。

修复步骤：修改错误处理方法 #

在你的handleError方法里，先把ArrayBuffer格式的错误响应转换成字符串，再解析成JSON对象，就能拿到后端返回的错误信息了。

修改后的handleError代码：

private handleError(error: HttpErrorResponse): Observable<any> {
  let errorData: any = error;
  // 处理ArrayBuffer格式的错误响应
  if (error.error instanceof ArrayBuffer) {
    const decoder = new TextDecoder('utf-8');
    const errorStr = decoder.decode(error.error);
    try {
      errorData = { ...error, error: JSON.parse(errorStr) };
    } catch (e) {
      // 解析失败时保留原错误文本
      errorData.error = errorStr;
    }
  }

  if (errorData.status === 401) {
    // this.router.navigate(['/auth']);
  } else if (errorData.status == 0) {
    this.toastService.show('无法连接到服务器，请联系管理员', {
      classname: 'toast align-items-center text-white bg-danger border-0',
      delay: 3000,
      show: false,
    });
  } else if (errorData.status && errorData.error?.error) {
    const errorMsg = errorData.error.message ? errorData.error.message : errorData.error.error;
    this.toastService.show(errorMsg, {
      classname: 'toast align-items-center text-white bg-danger border-0',
      delay: 3000,
      show: false,
    });
  }
  this.spinner.hide();
  return throwError(errorData);
}

代码说明： #

• 用浏览器原生的TextDecoder把ArrayBuffer转换成UTF-8编码的字符串，无需额外依赖。
• 尝试将转换后的字符串解析为JSON对象，确保能获取后端返回的结构化错误数据。
• 如果解析失败（比如后端返回纯文本错误），直接使用转换后的字符串作为错误信息。

这样修改后，就能在错误处理逻辑中正确获取到网络面板里显示的错误内容了。

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