Return 来自 angular 方法的异步数据

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 return 是订阅，而不是书籍数组，所以我不确定此方法如何 return 我需要的数据。任何帮助或资源指导将不胜感激！

Answer 1

您可以直接使用 observable 并直接使用它。

unprocessedBooks$: Observable<any>;

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

并且在html

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

Answer 2

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

为了便于阅读，我分离了您的 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 调用。如果您的 use-case 不同，您可以使用不同的地图。

Return 来自 angular 方法的异步数据

Return asynchronous data from an angular method

rxjs

angular