最近在用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;