angular 的同步http请求

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

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

 getGroupsList(): Observable {return (this.common.http.get('assets/mock-data/groupsinfo.json').pipe(catchError(this.common.handleError)));}public async getGroupsInfo(): Promise {return new Promise( resolve => {const groups: Array = [];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;

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！