使用Angular中的对象作为参数将Http请求发送到API

时间:2020-02-25 09:32:54

标签: angular api http post get

我有一个搜索表单,可以在其中填写我的Web应用程序中的输入字段。这些输入字段将最终出现在我的SearchCriteria对象中。

单击搜索按钮后,我想将SearchCriteria对象发送到API,该API将返回匹配的Order对象的集合。现在,后端代码已经准备就绪,我只需要执行正确的API调用即可。

这是我尝试过的方法,但我似乎总是遇到http 400错误。

  getOrders(searchCriteria: SearchCriteria): Observable<Order[]> {

    let requestoptions = {
      'headers': new HttpHeaders({'Content-Type': 'application/json'}),
      'withCredentials': true
    };

    return this.http.post(environment.backend + "/api/orders/getOrders", searchCriteria, requestoptions).pipe(map((response: any) => {
      return response;
    }));
  }

请求网址如下:

Request URL:http://localhost:8080/angular-rest/api/orders/getOrders?searchCriteria=%7B%22user%22:%7B%22firstName%22:null,%22lastName%22:null%7D,%22orderMinAmount%22:null,%22orderMaxAmount%22:null,%22orderDate%22:null,%22product%22:%22Phone%22%7D

/ api / orders / getOrders如下:

@RequestMapping(path = "getOrders", method = POST, consumes = "application/json", produces = "application/json")
public Collection<Order> getOrders(@RequestBody SearchCriteria searchCriteria) {
    return orderService.getOrders(searchCriteria);
}

现在我正在阅读东西,但无法弄清楚。

我真正想要的(我认为)是将对象(searchCriteria)发送到我的http请求的请求正文中,因此URL看起来不会很长,而且http请求当然可以成功。

我在做什么错?有什么更好的办法?

1 个答案:

答案 0 :(得分:1)

尝试这样

   getOrders(searchCriteria: SearchCriteria): Observable<Order[]> {
          let headers = new HttpHeaders({'Content-Type': 'application/json'}),
          return this.http.post(environment.backend + "/api/orders/getOrders",searchCriteria, {headers})
          .pipe(map((response: any) => {
            return response;
           }));
      }