angular 的同步http請求

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