Cannot get value from async function

Question

I'm trying to get the result of async function on ngOnInit.

On .ts file, I add this function:

async load()
{ 
    this.picaes = await this.userService.getAffectedExpertisesPromiseSE(25);
    console.log("-Inside load--------------" + this.picaes);
    return this.picaes;
}

On ngOnInit, I call this async funtion:

console.log("-Outside load--------------" + this.load());

On the file service.user.ts, I made this call:

async getAffectedExpertisesPromiseSE(id: number): Promise<any>
{
    var url= `${this.baseUrl}/users/expertisesObj/${id}`;
    var result= await (await fetch(url)).text();
    return result;
}

That produces:

-Outside load--------------[object Promise]

-Inside load--------------[{"id":1,"name":"Angular","selected":true},{"id":2,"name":"SpringBoot","selected":true},{"id":3,"name":"Primefaces","selected":true}]

So my problem is that I can't get the result on the console Outside load.

Could you please tell me what I missed ?. Big thanks.

Hello Sir @Reactgular, thanks for your reply. I got **'await' expression is only allowed within an async function** on sublime. — Laura, Jul 08 '19 at 09:02

score 4 · Accepted Answer · answered Jul 08 '19 at 09:12

4

Async function returns a promise not your expected output. Therefore you will not be getting the values on this.load(). Instead change your code to:

this.load().then((data) => {
   console.log('Outside load--------------' +data);
})

answered Jul 08 '19 at 09:12

Indragith

1,240
6
9

Hello Sir @Indragith, thanks a lot for your reply. But, I know that. But I'd like to get result outside **then**. Have you please any idea about solving that?. Big thanks Sir. – Laura Jul 08 '19 at 09:16
Initialize some variable in your component. Inside then, you can assign the data to that variable. – Indragith Jul 08 '19 at 09:19
Otherwise you can move that load function outside of ngOnInit and declare a new async function for loading data which will remove the error ' 'await' expression is only allowed within an async function' – Indragith Jul 08 '19 at 09:23
Yes Sir @Indragith, that's what I did, `async load()` outside **ngOnInit** as presented on my question. – Laura Jul 08 '19 at 09:34
I tried `let list: Expertise[] = []; this.load().then((data) => { list = data; console.log('IN load --------------' + data); }) console.log("-OUT load --------------" + list);`, but I got **nothing** on OUT – Laura Jul 08 '19 at 09:36
Second console log will get executed before the then function. You need to wait until the data gets loaded. – Indragith Jul 08 '19 at 09:42
Ok Sir, thanks, but where I go to add **wait** in such case ?. I tried `const v = await this.load(); console.log(v);` on **ngOnInit**, but I got on sublime **'await' expression is only allowed within an async function**Big thanks. – Laura Jul 08 '19 at 09:44
If you want to execute anything with the data, do it inside the then function. then function will wait until data gets loaded – Indragith Jul 08 '19 at 09:46
Ok Sir, that's what I did `let list: Expertise[] = []; this.load().then((data) => { list = data; console.log('IN load --------------' + data); }) console.log("-OUT load --------------" + list);`, Are you agree with that ?. – Laura Jul 08 '19 at 09:50
Call some function inside then. let list: Expertise[] = []; this.load().then((data) => { this.list = data; console.log('IN load --------------' + data); this.someFunction()}); someFunction() {console.log("-OUT load --------------" + this.list);}. Now it will work – Indragith Jul 08 '19 at 10:34
Yes Sir @Indragith, you're right. It works as well. Big thanks. Also, i can use `XMLHttpRequest` to maintain synchrnous call. – Laura Jul 09 '19 at 08:57

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

2

Why not trying using XMLHttpRequest instead of async

var request = new XMLHttpRequest();
request.open('GET', 'http://localhost:6227/api/auth/users', false);  
request.send(null);

You can use this thread, this may help you maintaing synchrnous call.

HTH.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 09 '19 at 08:33

Saria Essid

1,240
1
11
16

Yes, that way gives me the right response. Big thanks. – Laura Jul 09 '19 at 08:45

Cannot get value from async function

2 Answers2