Async is out of sync

Question

I have a button that makes an http.get on click, and then displays some data, although my async/awaits seem to not be synchronized correctly.

For a reason I haven't quite figured out yet, this.tabRows = file.contents will be called before loadDateFolderFileContents() completes. Am I missing an await somewhere?

  async ngAfterViewInit() {
    if (!this.drawn) {
        if(!file.contents){
          await this.dataLakeService.loadDateFolderFileContents(file.parentFolder);
        }
        this.tabRows = file.contents;
        this.redraw();
    }
  }

  public async loadDateFolderFileContents(dateFolder: folder) {
    await date.files.map(async file => {
      file.contents = await this.getFileContents(dateFolder.name, file.name);
    });
  }

  public async loadDateFolderFileContents(dateName: string, fileName: string): Promise<any> {
    var url = this.buildUrl(dateName, fileName);
    var fileContents = {};
    await this.http.get<any>(url).toPromise()
      .then(contents => { 
        fileContents = contents; 
      })
      .catch(e => { 
        console.log(`Error retreiving file contents from url ${url}. Exception:${e}`); 
      });
    return fileContents;
  }

This: `return fileContents;` --> Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Randy Casburn, Jan 25 '21 at 22:19
this is weird, you are awaiting, but you have a ```.then``` which won't be waited for. just let content = await this.http.get .... and put it in a try catch — Keith Nicholas, Jan 25 '21 at 22:20
@KeithNicholas Thanks for the tip. I'm still new to the whole world of JS/TS + Promises, so I'm still struggling with them here and there. — Chris Phillips, Jan 26 '21 at 00:44

score 1 · Answer 1 · answered Jan 25 '21 at 22:22

1

map is not async so instead of:

await date.files.map(async file => {
...

try

await Promise.all(date.files.map(async file => {
...)

answered Jan 25 '21 at 22:22

Ravenscar

2,730
19
18

mss · Accepted Answer · 2021-01-25T23:29:12.597

If you use await in a map, map will always return an array of promise. This is because asynchronous functions always return promises.
Since map always return promises (if you use await), you have to wait for the array of promises to get resolved. You can do this with await Promise.all(arrayOfPromises), after all promises are resolved, Promise.all returns a single promise.
below is your updated code

async ngAfterViewInit() {
    if (!this.drawn) {
        if(!file.contents){
          await this.dataLakeService.loadDateFolderFileContents(file.parentFolder);
        }
        this.tabRows = file.contents;
        this.redraw();
    }
  }

  public async loadDateFolderFileContents(dateFolder: folder) {
    await Promise.all(date.files.map(async file => {
      file.contents = await this.getFileContents(dateFolder.name, file.name);
    }));
  }

  public async loadDateFolderFileContents(dateName: string, fileName: string): Promise<any> {
    var url = this.buildUrl(dateName, fileName);
    var fileContents = {};
    await this.http.get<any>(url).toPromise()
      .then(contents => { 
        fileContents = contents; 
      })
      .catch(e => { 
        console.log(`Error retreiving file contents from url ${url}. Exception:${e}`); 
      });
    return fileContents;
  }

am I required to return from the loadDateFolderFileContents()? — Chris Phillips, Jan 26 '21 at 00:42
@ChrisPhillips, It's your choice, shouldn't matter because async function returns it's own undefined value wrapped in promise, if you don't return anything from it, otherwise whatever you are returning and here we are already using await inside the async function, so function will only return after asynchronous task is done — mss, Jan 26 '21 at 03:58
Thanks, this was the correct answer (as were some others below!). I'd have marked it sooner but I was heading out for the evening. — Chris Phillips, Jan 26 '21 at 17:06

score 1 · Answer 3 · answered Jan 25 '21 at 22:59

I think this is what you are trying to do:

async ngAfterViewInit() {
    if (!this.drawn) {
        if(!file.contents){
          await this.dataLakeService.loadDateFolderFileContents(file.parentFolder);
        }
        this.tabRows = file.contents;
        this.redraw();
    }
  }

  public async loadDateFolderFileContents(dateFolder: folder) {
    await Promise.allSettled(date.files.map(async file => {
      file.contents = await this.getFileContents(dateFolder.name, file.name);
      return file;
    }));
  }

  public async loadDateFolderFileContents(dateName: string, fileName: string): Promise<any> {
    var url = this.buildUrl(dateName, fileName);
    var fileContents = {};
     
    try { 
        const contents = await this.http.get<any>(url).toPromise();
        fileContents = contents; 
        return fileContents;
      } catch(e){
          console.log(`Error retreiving file contents from url ${url}. Exception:${e}`);
      }
 
    
  }

Async is out of sync

3 Answers3