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? — Randy Casburn
– Randy Casburn, Commented Jan 25, 2021 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
– Keith Nicholas, Commented Jan 25, 2021 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
– Chris Phillips, Commented Jan 26, 2021 at 0:44

mss · Accepted Answer · 2021-01-25 23:29:12Z

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()?
@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
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.

Ravenscar · Accepted Answer · 2021-01-25 22:22:51Z

map is not async so instead of:

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

try

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

Jurshsmith · Accepted Answer · 2021-01-25 22:59:46Z

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

Collectives™ on Stack Overflow

Async is out of sync

3 Answers 3

4 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Linked

Related