Angular RXJS 调用 http post 请求无效

Question

我是 Angular RXJS 的新手，我正在尝试将 post 添加到服务器，然后从服务器获取所有 post，因为我使用的是 Server-侧面分页。

请问为什么调用了addPostToServer函数而没有调用HTTPPost！或者如果您有更好的方法来实现同样的目标？

提前致谢


 private pageIndexSubject = new BehaviorSubject<number>(1);
 public pageIndexAction$ = this.pageIndexSubject.asObservable();

 private pageSizeSubject = new BehaviorSubject<number>(6);
 public pageSizeAction$ = this.pageSizeSubject.asObservable();

 private postInsertedSubject = new Subject<Post>();
 postInsertedAction$ = this.postInsertedSubject.asObservable();

  paginatedPosts$ = combineLatest([
    this.pageSizeAction$, 
    this.pageIndexAction$, 
    this.postInsertedAction$.pipe(
      startWith(''),
      tap((post) => {
      let m = this.addPostToServer(post).pipe(tap(res=>console.log('add post to server', res)))
   })), 
  ]).pipe(
    switchMap(([pageSize,pageIndex,post]) => 
    this.http.get<APIResponse<PagedPosts<Post[]>>>(this.APIURL + '/posts', {
      params:
      {
        size: pageSize.toString(),
        page: pageIndex.toString()
      }
    })
   .pipe(
    map((response) => {
      return response.data;
    }),
    catchError(this.handleError),
    ))
    ).pipe(shareReplay(1))


    addPost(post:Post){
      this.postInsertedSubject.next(post);
    }

    addPostToServer(post: Post | string) {
      console.log('Function called but the HTTP is not !')
        return this.http.post<APIResponse<Post>>(
          this.APIURL + '/posts/',
            post
          )
          .pipe(
            map((res) => {
              //not working
            })
          );
      }

Answer 1

在您订阅 Observable 之前，HTTPClient 不会调用服务器，因此调用 addPostToServer 不会发送 HTTP 请求。

您可以订阅 observable


    addPostToServer(post: Post | string) {
      console.log('Function called but the HTTP is not !')
        return this.http.post<APIResponse<Post>>(
          this.APIURL + '/posts/',
            post
          )
          .subscribe((res) => {
              // get Your result here
          });
      }

如果使用 RxJs 7，则使用 lastResultFrom 将其转换为承诺 async/await

async addPostToServer(post: Post | string) { 
 let result = await lastResultFrom(this.http.post<APIResponse<Post>>(
          this.APIURL + '/posts/',
            post
          ));
}

或者使用 toPromise 就是使用 RxJs 6

async addPostToServer(post: Post | string) { 
    let result = await this.http.post<APIResponse<Post>>(
          this.APIURL + '/posts/',
            post
          ).toPromise();
}

Angular RXJS 调用 http post 请求无效

Angular RXJS calling http post request is not working

angular

rxjs