使用角度上传数组：如何从后端获取错误？答案

【问题标题】：Uploading array with angular: how to get errors from the backend?使用角度上传数组：如何从后端获取错误？
【发布时间】：2020-01-22 01:00:17
【问题描述】：

我有一个非常简单的 Angular 应用程序，它正在向后端/服务器（一个用 C# 编写的 MS AspNetCore 应用程序）发送一个字符串列表（仅对于这个示例，实际上它是一个称为协议的更复杂数据的列表）使用 post 方法。此功能运行良好，但由于我对 angular 非常陌生，因此在此过程中我正在努力处理发生在服务器端的故障。如果出现问题，我想在客户端显示错误消息。

这是我到目前为止根据 Angular 教程构建的内容： angular component.ts文件基本都有上传方法：

constructor(
    private readonly SVC: UploadService) { }

uploadStringlist(): void {
    let sarray: string[] = [];

    sarray.push("string1");
    sarray.push("string2");

    this.SVC.uploadList(sarray).subscribe(
     _ => { this.finished,emit(`protocols sent: next`)},
     err => { this.finished.emit(`Protocols sent: error` + err)},
     () => { this.finished.emit(`Protocols sent`)});
}

而upload.service.ts文件基本上都有这个方法：

uploadList(slist: string[]): Observable<string> {
  return this.http.post<string>(apiurl, slist, httpOptions)
    .pipe(
      tap(res => log("uploaded protocol list to server", res)),
      catchError(handleError<string>("test")));
}

管道只是为了完整性（我不想在原始代码中过多地更改我的示例）

所以在服务器端只有这个uploadController：

[HttpPost]
public IActionResult Post(string[] slist)
{
    foreach (var s in slist)
    {
       // do something
    }

    return StatusCode(409);
    //return Ok();
}

所以，无论我在控制器上返回什么，我都会在客户端得到相同的结果。这意味着我得到了结果：“protocols sent”。

但理想情况下，如果我在控制器中返回错误，我会得到一个结果列表（字符串数组中的每个条目一个）或者至少一个错误。但我不知道如何实现。

【问题讨论】：

标签： c# angular typescript

【解决方案1】：

您可以使用ModelState 在控制器中保持错误处理模式，这样您就可以确保所有错误返回都具有相同的结构。

将ModelState 与BadRequest 方法一起使用将确保您的ModelState 将被归档到您的代码中的err 变量中：err => { this.finished.emit('Protocols sent: error' + err)},

这是基于您的代码的简单示例。

[HttpPost]
public IActionResult Post(string[] slist)
{
    try
    {
        foreach (var s in slist)
        {
           // do something
           if(NotValid(s))
           {
               ModelState.AddModelError("", "Your message to the client");
           }
        }

        if (!ModelState.IsValid)
            return BadRequest(ModelState);

        return Ok(new { successMessage = "success"});
    }
    catch(Exception ex)
    {
        // log your exception
        ModelState.AddModelError("", "Your generic error message");
        ModelState.AddModelError("SomeProperty", "Your error message about 'SomeProperty'");
        return BadRequest(ModelState);
    }
}

在您的客户端，您需要更改此行：

catchError(handleError<string>("test")));

到这样的事情：

catchError(error => handleError<any>(error)));

您可以在 de docs 上了解有关 ModelState 的更多信息：
https://docs.microsoft.com/en-us/aspnet/core/mvc/models/validation?view=aspnetcore-3.1

【讨论】：

这在客户端是如何处理的？我担心我只是订阅服务中的上传方法的方式还不够。..
我刚刚更新了客户端更改的答案。一旦您在服务器上返回状态代码 >= 400，您的客户端将自动知道发生了错误。比你只需要在你的.post 方法的catchError 上处理它

【解决方案2】：

查看错误的方法之一是抛出exception，例如：

throw new ArgumentException("Something bad happened.");

此外，对于 Web API 项目，请确保您已从 web.config 文件中打开错误报告（但在投入生产时将其关闭）：

<system.web>
    <customErrors mode="Off" />
</system.web>

【讨论】：