Pass subscribe response to variable - Angular

Question

i trying to pass the subscribe response of my Http.Get to a variable but always i try it the values when comes is undefined

TesteToken() : any {
let token;
this.http.get<any>(`${this.url}/token`).subscribe(res => {
  token = res;
  return token;
});}

but when i put this

 TesteToken() : any {
let token;
this.http.get<any>(`${this.url}/token`).subscribe(res => {
  token = res;
  console.log(token);
});}

then works and the output is in console

Don't forget that your HTTP GET call is **asynchronous**. Generally speaking, it is code smell to "flatten" an Observable into a local variable in this way, for the very reasons you're having problems. Consider consuming the Observable as an Observable, possibly implementing a BehaviorSubject architecture (or a library like NgRx) to be able to "store" values in this way. — Will Alexander, Jan 05 '22 at 16:32

Souhail HARRATI · Answer 1 · 2022-01-06T08:08:37.513

1

You can use this solution (convert obserbable to promise and add async/await):

async TesteToken(): Promise<Something> {
    return this.http.get<any>(`${this.url}/token`).toPromise();
}

let token = await  this.TesteToken();

edited Jan 06 '22 at 08:08

answered Jan 05 '22 at 17:03

Souhail HARRATI

303
2
7

you need to add `await` before this.TesteTokens(); or you just save Promise to `token` variable, and you can use `await` only inside of async functions. – izmaylovdev Jan 05 '22 at 17:07
1

and you probably face this issue in the future if you go this way https://stackoverflow.com/questions/56092083/async-await-in-angular-ngoninit – izmaylovdev Jan 05 '22 at 17:12
Subhana Allah ,Thanks a lot Souhail HARRATI ,it's so useful and helpful brother – soufiane ELAMMARI Jul 15 '22 at 00:46

score 0 · Answer 2 · answered Jan 05 '22 at 17:19

0

Issue: You are trying to return async response, like its synchronous.

    TesteToken() : any { // this does not return anything since function ends before a value is returned.
    let token;
    this.http.get<any>(`${this.url}/token`).subscribe(res => {
      token = res;
      return token;  // does nothing
    });
}

Fix: Subscribe where you want to set the value.

TestToken() : Observable<any> { // you can set the type of any
return this.http.get<any>(`${this.url}/token`);
}

To access the value;

// code runs
    this.TestToken().Subscribe((value) => { 
// code runs after value has returned from server
console.log(value); 
})
// code outside subscribe runs first without waiting.

answered Jan 05 '22 at 17:19

vaira

2,191
1
10
15

there´s no difference the problem persists, the console log is showing and the value is not set – Felipe Cruz Jan 05 '22 at 17:35
if the code runs after the value has returned from server why i can set the value to variable? let token; this.service.ObterToken().subscribe((data) => token = data); console.log(token); – Felipe Cruz Jan 05 '22 at 17:40
`token = data` should be 'this.token = data', if you are trying to access that data outside subscribe, It should be a property, not a variable – vaira Jan 05 '22 at 17:43
same result adding a property to get data value – Felipe Cruz Jan 05 '22 at 17:45
how are you viewing the data value? FYI, you will get the value when the response comes from the API, if you want to suppose call a function after the value is set, that function will also have to do inside the subscribe. – vaira Jan 05 '22 at 19:08
The code is fine I would suggest you to read , the link , You seem to lack understanding of this concept https://www.freecodecamp.org/news/synchronous-vs-asynchronous-in-javascript/ – vaira Jan 05 '22 at 19:11

Pass subscribe response to variable - Angular

2 Answers2