从角度方法返回异步数据

Question

我对 Angular 还很陌生，并且仍在尝试以 Angular + httpClient + rxjs 的方式做事。我正在尝试编写与以下内容等效的 rxjs：

async onButtonClick = () => {
    const processedBooks = await this.getAndProcessBooks();
    await myGenericHttpClient.post('/api/something', processedBooks);
}

async getAndProcessBooks = () => {
    const books = await myGenericHttpClient.get('/api/books');

    const processedBooks = books.map(book => {
        return book.read = true;
    });

    return books;
};

我对 rxjs 的理解是我需要使用 Angular 的 httpClient 发出请求然后订阅响应：

getAndProcessBooks = () => {
    return httpClient.get('/api/books').subscribe(books => {
        return books;
    });
};

但是，问题是getAndProcessBooks 返回一个订阅，而不是书籍数组，所以我不确定这个方法如何返回我需要的数据。任何资源的帮助或指导将不胜感激！

Answer 1

您可以使用 RxJs 的不同地图运算符（例如 mergeMap、concatMap 等）从一个 API 调用中获取结果并将其发送到另一个 API 调用，这适合您的用例。

为了便于阅读，我分离了您的 HTTP 调用并为它们创建了函数。

//Returns Books
getAndProcessBooks(): Observable<any> {
    return this.myGenericHttpClient.get('/api/books');
}

//API something that requires books to send call
apiSomethingFunction(processedBooks: any): Observable<any> {
   return this.myGenericHttpClient.post('/api/something', processedBooks);
}

//On the button click
 onButtonClick(): void {
    this.getAndProcessBooks()
      .pipe(
        switchMap((books) => {
          //Response of books comes here, you can map them before sending it to the something API
          return this.apiSomethingFunction(books);
        })
      )
      .subscribe((resp) => {
        console.log(resp);
        console.log('I got Response of API Something');
      });
  }

我使用switchMap 运算符的原因是如果用户再次单击该按钮，则取消之前的 HTTP 调用。如果您的用例不同，您可以使用不同的地图。

Answer 2

你可以直接获取 observable 并直接使用它。

unprocessedBooks$: Observable<any>;

getAndProcessBooks() {
    unprocessedBooks$ = httpClient.get('/api/books').pipe(data => {return data;});
};

在html中

<div>{{ unprocessedBooks$ | async}}</div>