Question

结果是我不确定？我使用contact Api，在服务中获取组件html上的数据，但是当我控制台结果时，我不确定。

  element: any ;
  constructor(private service: BlockService) { }
   ngOnInit() {
        this.service.getSource().subscribe(async data=> {
        console.log(data)
        return  this.element  = await data
      })
    console.log(this.element )
  }

Answer 1

我认为您不需要async和await关键字。该服务默认为异步

  element: any;
  constructor(private service: BlockService) {}
  ngOnInit() {
    this.service.getSource().subscribe(data => {
      console.log(data); // will log the data
      this.element = data;
    });
    console.log(this.element) // will log null/undefined.
  }

编辑：

想想订阅会在运行时间的稍后发生。如果我们有一个以数字表示的时间轴，则代码的执行或多或少会像这样：

构造函数代码
ngOnInit代码
开始订阅（等待响应）
console.log（'this.element'）。
获得了订阅的响应，所以我们得到了数据，并且 this.element已设置。

Answer 2

尝试一下

  element: any ;
  constructor(private service: BlockService) { }
   ngOnInit() {
        this.service.getSource().subscribe(data=> {
        console.log(data);
        this.element  = data;
        someMethod();
      })
  }
  someMethod(){
   //here you can use this.element data
  }

Answer 3

您可以使用

  element: any;
  constructor(private service: BlockService) { }
  async ngOnInit() {
    this.element = await this.service.getSource().toPromise();
    console.log(this.element)
  }

Answer 4

这不是观察者模式的工作原理，您必须订阅观察者数据流才能获取数据。您将无法不订阅就获取数据！

因此，订阅中没有使用async或await运算符！

在这种情况下，您可以在块范围之外使用变量，并在订阅观察者后分配值

export class MyComponent {

  dataToPopulate: any = null;

  constructor(private service: BlockService) {}

  ngOnInit() {
    this.service.subscribe(
      data => dataToPopulate = {...data}, // for response 200 OK

      error => console.log(error), // handle network error here {400 or 500 etc}

      () => console.log(this.dataToPopulate) // complete callback hook
    )
  }

}

专业提示：取消订阅组件销毁钩子的订阅，以避免内存泄漏

还有另一种将Observable转换为Promise toPromise并使用async和await运算符的方法。但是对于网络呼叫，您需要在这些语句周围使用try catch块来检测400或500

之类的服务错误响应

组件ts中的Varbale上的angular 7服务存货HttpClient

4 个答案: