无法在 Spring Boot 中调用 put 端点

Question

我有来自前端的这段代码 (Angular)

   private _baseUrl = "http://localhost:8080/api/v1/professor/";


   getProfessor(id: string): Observable<Professor> {
    const professor = this.http.get<Professor>(this._baseUrl + id);
    return professor;
   }
   addProfessorRating(id: string, rating: Object): void {
    // get the professor, then modify the ratings of them, and make a put request
    this.getProfessor(id).subscribe(professor => {
        let ratings = professor['ratings'];
        ratings.push(rating);
        professor['ratings'] = ratings;
        return this.http.put<void>(this._baseUrl + id, professor, {
            headers: new HttpHeaders({
                'content-type': 'application/json'
            })
        })
    });
}

来自后端的端点（Spring 启动）：

@PutMapping(path = "/{id}")
public String updateProf(@PathVariable("id") String id, @Valid @NotNull @RequestBody Professor professor) {
    logger.info("updating professor");
    professorService.updateProfessor(id, professor);
    return "Updated professor with id: " + id;
}

但是，端点未调用，因为记录器未在控制台中记录任何内容。我尝试使用 Postman，它确实调用了端点。我做错了什么吗，如果这个 post 不够具体，我也会提供任何信息。

更新：我通过 Angular 表单中的 onSubmit 函数调用了 addProfessorRating：

onSubmit(rating: Object) {
    const id = this.route.snapshot.paramMap.get('id');
    this.professorService.addProfessorRating(id, rating);
}

如有任何帮助，我将不胜感激。

Answer 1

您需要使用 RxJS 高阶映射运算符（例如 switchMap）从一个可观察对象（this.getProfessor()）映射到另一个（this.http.put()）。

尝试以下方法

private _baseUrl = "http://localhost:8080/api/v1/professor/";
addProfessorRating(id: string, rating: Object): void {
  this.getProfessor(id).pipe(        // get the professor, then modify the ratings of them, and make a put request
    switchMap(professor => {
      let ratings = professor['ratings'];
      ratings.push(rating);
      professor['ratings'] = ratings;
      return this.http.put < void > (this._baseUrl + id, professor, {
        headers: new HttpHeaders({
          'content-type': 'application/json'
        })
      });
    })
  ).subscribe(
    res => console.log(res),
    err => console.log(err)
  );
}

好的做法是 return 从所有函数中观察到并在基本函数中订阅它。这允许您保留调用的异步性质并使用来自可观察对象的发射值。

addProfessorRating(id: string, rating: Object): Observable<any> {    // <-- return the observable
  return this.getProfessor(id).pipe(        // get the professor, then modify the ratings of them, and make a put request
    switchMap(professor => {
      let ratings = professor['ratings'];
      ratings.push(rating);
      professor['ratings'] = ratings;
      return this.http.put < void > (this._baseUrl + id, professor, {
        headers: new HttpHeaders({
          'content-type': 'application/json'
        })
      });
    })
  );      // <-- don't subscribe yet
}

onSubmit(rating: Object) {
  const id = this.route.snapshot.paramMap.get('id');
  this.professorService.addProfessorRating(id, rating).subscribe(    // <-- subscribe here
    res => {
      console.log(res);
      // other statements that depend on `res`
    },
    err => {
      // also good practice to handle error notifications from HTTP observables
    }
  );
}

其他类型的 RxJS 高阶映射运算符是 mergeMap、concatMap 和 exhaustMap。您可以找到它们之间的简要区别 .

无法在 Spring Boot 中调用 put 端点

Can't invoke the put endpoint in Springboot

angular

spring-boot

angular-httpclient