如何使程序等到在Angular中执行可观察到的

Question

我正在从事一个角度项目，我的情况是，使用可观察到的产品来打电话给后端。

这是代码的样子。

getProducts () : Product[] {
this.http.get<[]>(this.m_baseURL+'/products').subscribe(res => {
  console.log(res)
  this.products = res;
});
  return this.products
}

问题是，返回语句不会等待上述语句被执行。在我的组件中，我得到一个空数组。我在服务和组件中使用控制台日志检查了。事实证明，在可观察到的值之前，将执行返回语句。

我该如何停止直到完成工作，就像异步等待一样。我应该使用普通异步而不是可观察的吗？

这是我的第一个角度项目，所以如果问题是新手，请原谅我。

Answer 1

而不是等待返回时间，某些任务使用反应性方法。

someService.ts

products$: Product[];

getProducts() : Product[] {
   this.products$ = this.http.get<[]>(this.m_baseURL+'/products');
}

someComponents.ts

filteredProducts: Product[];
private readonly unsubscribe$ = new Subject();

constructor(private someService: SomeService){}

ngOnInit() {
   this.someService.getProducts();

   this.someService.products$.pipe(takeUntil(this.unsubscribe$)).subscribe((products) => {
   this.filteredProducts = products.filter(product => product.id > 0); // look over filtering
});
}

ngOnDestroy() {
 this.unsubscribe$.next();
}

someComponent.html

<div *ngFor="product of filteredProducs">{{ product }}</div>

许多方法可以解决这个常见问题。也有许多改善它的方法。这是一种方式。我不知道您的过滤是如何工作的，但是如果可能的话，我希望使用|异步管道完全避免手动订阅，并用额外的管道过滤或过滤可观察到的本身。

Answer 2

要等待可观察到的第一个值，您可以使用firstValueFrom（）。此方法很危险，因为它可能会导致您的应用程序无限期地悬挂，始终包含超时机制。

  async getProducts(): Promise<Product[]> {
    const res = await firstValueFrom(
      this.http.get<[]>(this.m_baseURL + '/products').pipe(timeout(10000))
    );
    console.log(res);
    this.products = res;
    return this.products;
  }

---

一个更好的设计是只提出HTTP请求以更新this.products，并且只需使用它的变量，就像它始终具有内容一样，您可以在订阅中做其他事情，如果您希望副作用到发生在更新中。

products: Product[] = [];

ngOnInit(){
  this.updateProducts();
}

updateProducts() : void {
  this.http.get<[]>(this.m_baseURL+'/products').subscribe(res => {
    console.log(res)
    this.products = res;
    this.doSomething();
    this.doSomethingElse();
  });
}

当收到HTTP响应时，更改检测将自动更新您的HTML，但是您始终可以使用更改eTectorRef.detectChanges（）强制强制。

<div *ngFor="product of products">{{ product.name }}</div>

上述HTML将为空白，直到您的第一个订阅完成为止，此时应该自动更新。

---

如果您正在使用服务，则看起来这样：

服务

products: Product[] = [];

updateProducts() : void {
  this.http.get<[]>(this.m_baseURL+'/products').subscribe(res => {
    console.log(res)
    this.products = res;
    this.doSomething();
    this.doSomethingElse();
  });
}

组件

constructor(private service: MyService){}

ngOnInit(){
  this.updateProducts();
}

get products(){
  return this.service.products;
}

updateProducts(){
  this.service.updateProducts();
}

两个包装器方法就是这样，因此您不必编写服务在您的HTML中。

---

如果您希望在不同的组件中发生唯一的副作用，则将this.products转换为主题，然后您可以在products更改时订阅并执行回调。 capysubject允许您将值初始化为空数组。

Service

products$ = new BehaviorSubject<Product[]>([]);

updateProducts() : void {
  this.http.get<[]>(this.m_baseURL+'/products').subscribe(res => {
    console.log(res)
    this.products$.next(res);
  });
}

如果要将主体的值保存在组件中，而不是使用async管道订阅，请确保在销毁组件时取消订阅。那是因为此主题无法像httpclient的可观察到的那样完成，因此除非取消订阅，否则订阅将保留在内存中。

组件

sub = new Subscription();
products = [];

constructor(private service: MyService){}

ngOnInit(){
  this.sub = this.service.products$.subscribe(res => {
    console.log(res)
    this.products = res;
    this.doSomething();
    this.doSomethingElse();
  });
  this.updateProducts();
}

updateProducts(){
  this.service.updateProducts();
}

ngOnDestroy(){
  this.sub.unsubscribe();
}

Answer 3

您可以对此使用异步 /等待模式，但我建议您反对。了解如何使用可观察物进行异步编程。

加载产品的服务方法应返回可观察的可观察：

getProducts () : Observabe<Product[]> {
 return this.http.get<[]>(this.m_baseURL+'/products')
}

消费代码应订阅可观察到的数据并获取数据：

myGetProductService.getProducts().subscribe(res => {
  console.log(res)
  this.products = res;
});

Answer 4

在这里做事的角度方法是不要返回product []，而是要返回可观察到的本身：

getProducts(): Observable<Product[]> {
  return this.http.get<Product[]>(this.m_baseURL+'/products');
}

然后，您使用async管道来订阅此观察力，并且Angular将自动显示数据。

这就是这是一种服务方法的情况。如果您在组件中进行此操作，那么简单的答案是：不要。将其放在服务中。那就是他们的目的。

强烈建议您尝试Angular的《英雄之旅》教程。他们讨论了这种事情。

Answer 5

Angular不支持同步可观测值或HTTPCLCCLIENT调用

坏消息！ Angular不支持任何类型的真正同步调用！

此混淆了想要等待数据检索数据的新角开发人员，但是没有办法延迟可观察的键入角度，因为它的构建围绕等待 - 方便技术。 httpclient，Promise或fetch都等待等待 等待等待，也是如此。

使A 真正同步请求的唯一方法是使用旧的XMLHTTPREQUEST（） 同步呼叫数据，该数据仍然可以在Angular中使用。但这在像Angular这样的异步技术中不是一个不错的选择。

    function MyXMLHttpRequest() {
      let req = new XMLHttpRequest();
      req.open('GET', "https://example.com/data.json");
      req.onload = function() {
        if (req.status == 200) {
          alert("Success : "+this.responseText);
        } else {
          alert("Error : Status Error : " + req.status);
        }
      }
      req.send();
    };
    MyXMLHttpRequest();

请继续阅读...

许多角度程序员对此感到困惑的是，是否可以将可观察物被欺骗到表演同步（由异步 - 瓦特承诺等）。但是他们不能。许多开发人员认为添加或删除计时器，延迟或回调功能会改变其基本异步行为，但事实并非如此。 a 同步进程是指停止或 blocks 的整个外部代码继续运行直到过程完成的过程（如传统的JavaScript）。 可观察到，httpclient和promises都是 asynchronous 对象。

异步代码在其自己的时间轴上运行，这意味着在触发异步代码后，JavaScript跳到可观察到的或异步代码后的下一个代码块代码并保持运行。你不能停止。一旦可观察到的数据返回数据，脚本就会跳回可观察到的处理以完成其处理，然后返回到之前关闭的位置。

除了使用真正的老式调用xmlhttprequest（）之外，您的最佳策略是将可观察到的可观察到的ngoninit（），ngoninit（），），组件的构造函数或路由护罩，并在其数据处理管道结束时添加回调方法，该方法跳到您的同步代码。这样可以保证您的代码才能运行，直到可观察到的数据处理可观察到。然后迫使Angular可观察暂停并收集所有数据并在调用代码的下一部分之前完成其事件。这将模拟使用可观察到的同步代码事件。以下是一个例子。

伪造Angular中的同步呼叫，

您可以通过在可观察到的订阅区域中使用简单的回调函数来伪造同步调用。在可观察后，下面的角组件中的自定义功能同步运行。dosomethingNew（）方法将在httpclient（AN 可观察到 type）之后才能运行。 ）订阅完成其数据收集，并将其分配给 products 属性：

import {HttpClient} from '@angular/common/http';

export class MyComponent {

  products: IProduct[] = [];

  constructor(private http: HttpClient){

      this.http.get<IProduct[]>('api/products/products.json').subscribe(
          data => {
            this.products = data;
            // This will not fire till all the data is loaded...
            this.doSomethingNew();
          },
          error => {console.error(error)}
      );
  }

  // This does not get called till the HttpClient (Observable) is completed!
  // This simulates a synchronous routine.
  // Notice our products array now has the data we need.
  doSomethingNew(){
    let mynewdata = this.products;
    // do something with mynewdata
  }
}