时间戳

首页 > 解决方案 > 如何返回来自响应的数据

angular - 如何返回来自响应的数据

问题描述

我有一个通过执行 getName 函数开始的服务，然后当一些数据进入 getPlace 函数的 else 块时，而不是常规对象，我得到一个订阅者（如您在屏幕截图中看到的那样），尽管理论上我订阅了我分配值的更改。它可以修复吗？ 在此处输入图像描述

在此处输入图像描述

标签： angularrxjs

解决方案

正如其他人所说，您不能将 http 请求（http.get）视为程序代码。http请求是异步的，方法中的代码只有在服务器返回数据后.pipe()才会执行。

因此getPlace()，您的方法将无法data通过调用该_getPlace()方法简单地返回。

而不是与这种工作方式作斗争并试图“修复”它。我建议您将两者都作为 Observables 处理。

我在类似情况下的代码如下所示：

服务

import { Observable, of, throwError } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';

getProducts(): Observable<IProduct[]> {
    if (this.products) {
        return of(this.products);
    }
    return this.http.get<IProduct[]>(this.productsUrl)
        .pipe(
            tap(data => console.log('All Products', JSON.stringify(data))),
            tap(data => this.products = data),
            catchError(this.handleError)
        );
}

零件

    this.productService.getProducts().subscribe({
        next: (products: IProduct[]) => {
            this.products = products;
        },
        error: err => this.errorMessage = err
    });

在这里，如果数据已经被缓存，它使用 RxJSof操作符将数据转换回 Observable。

这样您就可以订阅 getProducts 的结果，您将获得缓存的数据或检索到的数据。

注意：另一种选择是声明式地使用 RxJS 并利用 RxJSshareReplay(1)运算符自动为您提供缓存。有关此技术的更多信息，请查看：https ://www.youtube.com/watch?v=Z76QlSpYcck&t=517s

推荐阅读