TypeScript - 異步等待不等到功能完全執行？

Question

從存儲中獲取用戶名、密碼和標題后，我需要從 API 中獲取數據。 因此，在最終調用 API 之前，我使用了三次異步等待。

可以正確獲取數據，但不知何故刷新超時 function 在 getData function 完全執行之前首先完成。

doRefresh(event) {
        setTimeout(async () => {
          await this.storage.get('username').then(async username => {
            await this.storage.get('password').then(async password => {
              await this.storage.get('title').then(async tempName => {
                await this.myService.getJSON(username, password, tempName, "keywordA", this.section).then(async ()=> {
                  await this.myService.getJSON(username, password, tempName, "keywordB", "trainingInfo");   }).finally(async ()=> {
                    await this.getData();
                    console.log('done');
                    event.target.complete();
                });
              })
            })
          });   
          
        }, 2500);
        
      }

已嘗試刪除異步等待，並像這樣放置代碼，但仍未按預期工作。 似乎 console.log / event.target.complete 總是在等待 getData function 完成之前先執行。

doRefresh(event) {
        setTimeout(() => {
          this.storage.get('username').then(username => {
            this.storage.get('password').then(password => {
              this.storage.get('title').then(tempName => {
                this.myService.getJSON(username, password, tempName, "keywordA", this.section).then(()=> {
                  this.myService.getJSON(username, password, tempName, "keywordB", "trainingInfo");   }).finally(()=> {
                    this.getData();
                    console.log('done');                    
                });
              })
            })
          });   
        event.target.complete();
        }, 2500);

      }

Answer 1

在第一個示例中，您混合使用 await 和.then，最好使用一個或另一個。 這是用 async/await 重寫的，在我看來它更具可讀性。

async () => {
try {
  const username = await this.storage.get('username')
  const password = await this.storage.get('password')
  const tempName = await this.storage.get('title')
  await this.myService.getJSON(username, password, tempName, "keywordA", this.section)
  await this.myService.getJSON(username, password, tempName, "keywordB", "trainingInfo")
  await this.getData();
  console.log('done');
  event.target.complete();
 } catch (e) {
  console.log("something went wrong")
 } 
}