TypeScript - 异步等待不等到功能完全执行？

Question

I need to fetch data from the API after getting the username, password and title from storage. Hence I use async await thrice before finally calling the API.

The data can be fetched correctly, but somehow the refresh timeout function completed first before the getData function fully executed.

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);
        
      }

Have tried to remove async await, and put the code like this, but still not working as expected. Seems like console.log / event.target.complete always execute first before waiting getData function complete.

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

In the first example, you're mixing await and.then, best to use one or the other. Here's it re-written with async/await, it's much more readable in my opinion.

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")
 } 
}