angular 的同步http请求

最新推荐文章于 2026-04-15 10:43:12 发布

原创最新推荐文章于 2026-04-15 10:43:12 发布 · 9.8k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

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

最近在用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里面获取

async setOptions() {
    const gcList = await this.groups.getGroupsInfo();
    this.gcOptions = gcList;
  }

async 配合 await 。并且通过 await 阻塞了后面代码的执行，直到 this.groups.getGroupInfo() 这个异步函数执行完。

Promise

Promise 是代表一个承诺，它可以承诺在一定的时间内，他会完成他的事件或者抛出错误。
换句话说，它刚生成时，他的状态是不确定的，在一定时间后，他的状态肯定会确定下来，同时只有两种情况，一种是顺利完成，一种是出错异常。在编写代码过程中只需要监听这两个状态就可以对其结果进行处理，通过链式调用的方式可以使代码更加易读。下面是个例子。

const reqPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('Request完成');
    resolve({data: 1})
  },1000)
})

reqPromise.then(x => console.log(x));

0;