angular 的同步http请求

最新推荐文章于 2020-12-28 23:20:49 发布

Ghost_02

最新推荐文章于 2020-12-28 23:20:49 发布

阅读量9.5k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/Ghost_leader/article/details/86659938

版权

在使用Angular的ng-zorro组件cascader时遇到异步数据加载问题，本文探讨如何实现同步获取数据。通过在Service中使用常规的RxJS方法和自定义的http请求器获取数据，然后在Component中利用async/await结合Promise来阻塞代码执行，确保数据加载完毕后再进行后续操作，从而解决级联选择器的数据加载问题。

摘要由CSDN通过智能技术生成

最近在用angular 的ng-zorro 的cascader 级联选择器的时候发现。cascader 在使用 rxjs 的 subscribe 异步传入数据时，cascader的级联选择加载不出来数据。于是想到如何使用同步来获取数据。

首先，获取数据，我写在 service 里。

 getGroupsList(): Observable<GroupsInfo> {
    return (this.common.http.get<GroupsInfo>('assets/mock-data/groupsinfo.json')
      .pipe(
        catchError(this.common.handleError)
      ));
  }

  public async getGroupsInfo(): Promise<Node[]> {
    return new Promise<Node[]>( resolve => {
      const groups: Array<Node> = [];
      this.getGroupsList().subscribe((list: GroupsInfo) => {
        for (const i of list.data) {
          groups.push(this.convert(i));
        }
        resolve(groups);
      });
    });
  }

getGroupList() 是正常的rxjs 获取json数据。 common.http 是我自己封装的一个http请求器。

getGroupInfo() 去取Observable数据流。但返回一个Promise。

最后component里面获取