订阅外的角度访问数据

Question

我们如何访问 angular 订阅之外的数据？ .我想在外面得到并使用结果。

用户组件 ts

submit(): void {
    const request = this.UserService
      .getUser()
      .subscribe((result) => {
        this.permissions = result[0].permissions
      });

    //I need to access the data here , permissions should not be empty 
    console.log("this.permissions" , this.permissions)

  }

服务

  getUser(): Observable<User[]> {
    return from(this.feathers.service('users').find<User>({ query : { identityId : 8895}}))
    .pipe(
      map((result) => result.data)
    );
  }

Answer 1

订阅的 observable 是 async 任务，而 console.log 是同步的。因此，console.log 将在订阅完成之前运行，因此您没有获得任何价值，之后当 http observable 完成时，我们将运行订阅，只有这样我们才能获得有关权限的数据。修改代码如下。

submit(): void {
    const request = this.UserService
      .getUser()
      .subscribe((result) => {
        this.permissions = result[0].permissions;
        //I need to access the data here , permissions should not be empty 
        console.log("this.permissions" , this.permissions)
      });
}

参考文献。

1. Event loop

Answer 2

这里的问题是 Observable 没有等待服务调用的响应并继续执行控制台语句。这就是为什么通过控制台语句打印的值不是您期望的响应。

有两种解决方案：

1) 一旦将值设置为此变量，您就可以通过任何其他方法内的用户组件访问 this.permissions 值。 尝试在此执行完成后调用的另一个方法中使用此变量。

2) 使用 async 和 await 并返回 Promise 对象而不是 Observable 。然后按顺序执行，只有在获取响应后才会执行控制台语句。

用户组件 ts

async submit(): void {
    const request = await this.UserService
      .getUser()
      .then((result) => {
        this.permissions = result[0].permissions
      });

    //I need to access the data here , permissions should not be empty 
    console.log("this.permissions" , this.permissions)

  }

服务

return new Promise((resolve, reject) => {
      from(this.feathers.service('users').find<User>({ query : { identityId : 8895}})).subscribe(response => {
        resolve(response);
      }, reject);
    });