Angular Posting to .net Web API

3 回答

• 5

  我看到为什么在代码中会出现意外错误和空值的原因有多种：

  • (错误)你的.net 方法callBcknd甚至不应该编译，因为它只能在有异常的情况下返回一些内容。

  • (错误)你应该在向 api 控制器发送数据时发送 json 消息体和 api 控制器方法应该接受一个复杂的对象而不是原始类型如string/int/bool等。

  • (警告)您的角度服务应该公开功能并返回组件可以订阅的可观察或承诺。不要直接暴露HttpClient。

  • (警告)您的 web api 应该直接返回接口IHttpActionResult而不是类型。然后，您可以使用 Ok，Content 和 BadRequest 等内置方法返回状态信息和数据。另见Web API 2 中的操作结果

  • (建议)使用Route和RoutePrefix作为属性，而不是依赖路由配置。这更灵活，您还可以指定要包含在 URL 中的参数，这将使更多 RESTful 设计成为可能。另见ASP.NET Web API 2 中的属性路由

  • (建议)添加CamelCasePropertyNamesContractResolver以解决前端和后端之间的 camel 和 pascal 外壳之间的问题。另见使用 ContractResolver 进行序列化

  ---

  这是如何调用 Web API 以及如何构建代码的一个很好的示例。

  请注意，这些代码示例仅显示已添加或修改的相关部分

  WebApiConfig.cs

  public static class WebApiConfig {
      public static void Register(HttpConfiguration config) {
          // add this to ensure that casing is converted between camel case (front end) and pascal case (c#/backend)
          var json = GlobalConfiguration.Configuration.Formatters.JsonFormatter;
          json.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
  
          config.MapHttpAttributeRoutes();
      }
  }
  

  ApiModel.cs

  public class ApiModel {
      public string Content {get;set;}
  }
  

  WebApIController.cs

  [RoutePrefix("api/WebApI")]
  public class WebApIController : ApiController {
  
      [HttpPost] 
      [Route("callBcknd")]
      public IHttpActionResult CallBcknd([FromBody] ApiModel body)
      {
          try
          {
              Log.Info(string.Format("{0}", body.Content));
              return Ok(new {Message = "It worked!"});
          }
          catch(Exception ex)
          {
              // example of how to return error with content. I would not recommend actually returning the exception details to the client in a production setting
              return base.Content(HttpStatusCode.InternalServerError, ex.ToString());
          }
      }
  }
  

  application.service.ts

  constructor(private httpClient: HttpClient){}
  
  callServer(data: {content: string}) : Observable<any> {
      return this.httpClient.post('http://localhost:3000/api/WebApI/callBcknd', data);
  }
  

  application.component.ts

  constructor(private myService: MyService){}
  
  onDoSomething(){
      this.myService.callServer({content: 'This is what I have sent'})
          .subscribe(data => console.log("Succeeded, result = " + data), (err)=> console.error("Failed! " + err));
  }
  

  ---

  请注意以下事项：

  • ApiModel表示请求中的传入对象。然后，角度调用发送{content: 'This is what I have sent'}，它反映了这种类型。

  • IHttpActionResult是 Web API 方法的响应类型

  • 您可以在方法CallBcknd中返回不同类型以及状态信息

  • 添加了Route和RoutePrefix以更好地控制 uri 路径。

  • 角度组件和服务已分为 2 个方法，服务返回一个 observable，组件调用服务方法和子目录到返回的 observable。当您扩展此示例时，您希望使用接口将any替换为定义的预期结果，对于要发送的任何传入参数也是如此。

  回复于 2024-04-30T01:25:15+08:00
• 1

  从“Angular”对 API 的 Tipical 调用

  update(data: string): Observable<IResponse> {
      console.log(data);
      let url = '...';
      let headers = new Headers({
          'Content-Type': 'application/json; charset=utf-8',
      });
      let options = new RequestOptions({ headers: headers })
  
      return this._http.post(url, data, options)
          .map((res: any) => {
              return res.json();
          })
          .catch(this.handleError);
  
  }
  

  API 中的代码

  [HttpPost] 
  public string callBcknd([FromBody]string body)
  {
     try
     {
        Log.Info(string.Format("{0}", body));
        //You must return something
        return "Post Realized";
     }
     catch(Exception ex)
     {
        return "error";
     }
  }
  
  //I like call async
  
  [HttpPost] 
  
  public async Task<IActionResult>callBcknd([FromBody]string body)
  {
     try
     {
        Log.Info(string.Format("{0}", body));
        //await "some action"
        //You can return OK("success") or an object
        return Ok(new { success = true, description = "callback sucesfully" });;
     }
     catch(Exception ex)
     {
              //You can return OK("error") or an object
        return Ok(new { success = false, description = ex.InnerException });;
     }
  }
  

  回复于 2024-04-30T01:25:15+08:00
• 0

  那么，你发布的内容会是什么样

  {"body":{// something here }}
  

  而您的控制器期望：

  "valuehere"(这是字符串的有效 json)。

  您需要更改 c#代码以获得 DTO 的模型：

  public class PostedObject{
   public object Data {get;set;}
  }
  
    [HttpPost] 
      public string callBcknd([FromBody]PostedObject body)
      {
      // do things
  
  }
  

  回复于 2024-04-30T01:25:15+08:00