在 angular 中发送带有 HttpParams 的获取请求

Question

这是我后端的 GET 映射：

@GetMapping(value = "search")
public List<Cat> search(@RequestBody CatDto catDto) {
    return catService.search(catDto);
}

我想发送 GET 请求以在 Angular HttpClient 中获取列表。我知道我不能用 GET 请求发送请求正文，我在 component.ts:

中这样做了

search(cat: Cat): Observable<Cat[]> {
   let params = new HttpParams();
   params = params.append('name', cat.name);
   params = params.append('rating', (cat.rating).toString());
   params = params.append('birtday', (cat.birthday).toLocaleDateString());
   return this.httpClient.get<Cat[]>(this.messageBaseUri+'/search', {responseType: 'json', params});
}

当然我得到：

Required request body is missing

来自我的后端。我可以在不更改后端的情况下以某种方式执行此操作，还是必须使后端端点看起来像这样：

@GetMapping(value = "search")
public List<Cat> search(@RequestParam String name,
                        @RequestParam Integer rating,
                        @RequestParam Date birthday) {

    return catService.search(name, rating, birthday);
}

Answer 1

GET 请求通常没有 HTTP 正文。

更改后端以接受请求参数而不是请求正文似乎是最干净的解决方案。但是，您可以像这样简单地更改它：

@GetMapping(value = "search")
public List<Cat> search(CatDto catDto) {
    return catService.search(catDto);
}

Answer 2

我相信这是你要求的：

Java 控制器：

            @GetMapping("/search")
            public List<Cat> search(
                                    @RequestParam("name") String name,
                                    @RequestParam("rating") Integer rating,
                                    @RequestParam("birthday") Date birthday) {
                       return catService.search(name, rating, birthday);
            }

在Angular服务中：

            searchCat(params: HttpParams): Observable<any> {
                return this.http.get<any>("/searchUrlHere", { params });
             }

最后调用文件中的搜索方法，参数为：

          onSearch(): void {
            const params = new HttpParams()
              .set('name', "yourName")
              .set('rating', "rating");
              .set('birthday', "birthday");
            this.gotToSearchDate(params);
          }

          gotToSearchDate(params: HttpParams) {
            this.catService.searchCat(params).subscribe(
              res => {
                console.log('List Date: ', res);
              },
              err => {
                console.log('Http error occurred');
              });
          }

或

         onSearch() {
            const catParams = new HttpParams().set('name', "yourName").set('rating', "rating").set('birthday', "birthday");
            this.catService.searchCat(catParams).subscribe(
              resp => {
                  console.log('List Date: ', res);
              },
              err => {
                console.log('Http error occurred');
              });
          }

Answer 3

GET 请求将其参数放入 URL，因此

控制器：

public List<Cat> search(@RequestParam CatDto catDto) {
    return catService.search(catDto);
}

视图模型：

public class CatDto {
  String name;
  Integer rating;
  Date birthday;
}

Angular:

search(cat: Cat): Observable<Cat[]> {
  let params = {
    name: cat.name, // also try "catDto.name": cat.name
    rating: cat.rating.toString(),  // also try "catDto.rating": cat.rating.toString()
    birthday: cat.birthday.toLocaleDateString() // also try "catDto.birthday": cat.birthday.toLocaleDateString()
  }

  return this.httpClient.get<Cat[]>(this.messageBaseUri+'/search', {
    responseType: 'json',
    params: params
  });
}

在 angular 中发送带有 HttpParams 的获取请求

Sending a get request with HttpParams in angular

typescript

spring-boot

angular

angular-httpclient