第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 Angular 中異步 http 調(diào)用后數(shù)據(jù)消失

在 Angular 中異步 http 調(diào)用后數(shù)據(jù)消失

慕萊塢森 2022-12-22 12:00:46
我必須編寫一個顯示多個數(shù)據(jù)的樹組件,這對我來說可以很好地處理模擬數(shù)據(jù)。這里的問題是當(dāng)我嘗試從服務(wù)器獲取數(shù)據(jù)時,讓我解釋一下:我有三個主要對象:區(qū)域、建筑物和門。正如您可能猜到的,doors 指的是 buildingId,而 buildingID 指的是地區(qū)。因此,要檢索數(shù)據(jù)并創(chuàng)建我的樹節(jié)點,我必須在非異步的 forEach 循環(huán)中執(zhí)行一些 http 調(diào)用。我不會與您分享所有內(nèi)容,只會分享一個最小化的問題,以便我可以輕松獲得幫助:此方法從服務(wù)器檢索區(qū)域數(shù)組并將其放入本地數(shù)組中:async getDistricts(){   this.districtDataService.getDistrictData().toPromise().then(async districts => {     this.districts = await districts.results as District[];   });}在我的 ngOnInit 上:ngOnInit() {this.getDistricts().then(async () => {  console.log(this.districts);  for (const district of this.districts){    console.log(district);  }})第一個 console.log(在 NgOnInit 中)返回一個空數(shù)組,這很令人驚訝,因為第一個方法將數(shù)據(jù)放在“this.districts”中。并在我將其放入后立即在第一種方法中記錄數(shù)據(jù)返回一個包含我的數(shù)據(jù)的數(shù)組。我想這與我使用的異步/等待有關(guān)。誰能幫忙?編輯 1:嘗試使用 this.getDistricts().finally() 而不是 this.getDistricts().then(),但沒有用。編輯 2:getDistrict 中的 console.log 在我的循環(huán)之前執(zhí)行。預(yù)期的行為恰恰相反。已解決:在我的 HTTP 調(diào)用解決此問題后,將 for 循環(huán)放入 finally 塊中。所以正如答案所說,我認(rèn)為我過度設(shè)計了異步/等待調(diào)用?;诖?,我不得不重新思考我的工作。謝謝大家!
查看完整描述

2 回答

?
慕村225694

TA貢獻(xiàn)1880條經(jīng)驗 獲得超4個贊

好吧,你應(yīng)該把你的Promisefrom還給你getDistricts。此外,您過度設(shè)計并使async/await概念復(fù)雜化。我知道你不想使用Observables,但我還是建議你使用它們。


有了 promises,async/await你就會明白如何使用它們:


async getDistricts(): Promise<District[]> {

  const { results } = await this.districtDataService.getDistrictData();

  

  return results;

}


async ngOnInit(): Promise<void> {

  this.districts = await this.getDistricts();


  for (const district of this.districts){

    console.log(district);

  }

}

它Observable看起來像這樣:


getDistricts(): Observable<District[]> {

  return this.districtDataService.getDistrictData().pipe(

    map(({ results }) => results as District[])

  );

}


ngOnInit(): void {

  this.getDistricts().subscribe((districts) => {

    this.districts = districts;

   

    for (const district of this.districts){

      console.log(district);

    } 

  });

}


查看完整回答
反對 回復(fù) 2022-12-22
?
拉莫斯之舞

TA貢獻(xiàn)1820條經(jīng)驗 獲得超10個贊

只是為了提供任何需要按所需順序進(jìn)行多個 http 調(diào)用的人。正如其他人所提到的,我將異步等待的概念過于復(fù)雜化了。訣竅是使用可觀察對象,使用 .toPromise() 將它們轉(zhuǎn)換為 Promises,使用 .then() 將數(shù)據(jù)放入我的變量中,然后使用 .finally(async () => { ... }).


這是我的最終代碼:


async ngOnInit(): Promise<void> {

 await this.districtDataService.getDistrictData().toPromise().then(response => {

   this.districts = response.results as District[];

   console.log(this.districts);

 }).finally(async () => {

   for (const district of this.districts){

      await this.districtDataService.getBuildingsOfDistrict(district.id).toPromise().then(response => {

      this.buildings = response.results as Building[];

      console.log(this.buildings);

     }).finally(async ()=> {

        for(const building of this.buildings){

          await this.districtDataService.getDoorsOfBuilding(building.id).toPromise().then(response => {

            this.doors = response.results as Door[];

            console.log(this.doors);

          }).finally(async () => {

              for(const door of this.doors){

                  await this.doorNodes.push(new districtNodeImpl(false,null,null,door,null));

              }

          })

         await this.buildingNodes.push(new districtNodeImpl(false,null,building,null,this.doorNodes));

        }

     })

     await this.dataSource.push(new districtNodeImpl(false,district,null,null,this.buildingNodes));

     console.log(this.dataSource);

     this.buildingNodes = new Array();

     this.doorNodes = new Array();

   }

 })

希望這會有所幫助!祝你今天過得愉快。


查看完整回答
反對 回復(fù) 2022-12-22
  • 2 回答
  • 0 關(guān)注
  • 89 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號