将订阅响应传递给变量 - Angular答案

【问题标题】：Pass subscribe response to variable - Angular将订阅响应传递给变量 - Angular
【发布时间】：2022-01-06 16:08:37
【问题描述】：

我试图将我的 Http.Get 的订阅响应传递给一个变量，但我总是尝试它的值是 undefined

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

但是当我把这个

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

然后工作，输出在控制台中

【问题讨论】：

不要忘记您的 HTTP GET 调用是异步。一般来说，以这种方式将 Observable “扁平化”为局部变量是代码异味，这正是您遇到问题的原因。考虑将 Observable 作为 Observable 使用，可能实现 BehaviorSubject 架构（或 NgRx 之类的库）以便能够以这种方式“存储”值。

标签： angular typescript

【解决方案1】：

问题：您正尝试返回异步响应，就像它的同步响应一样。

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

修复：订阅要设置值的位置。

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

访问值；

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

【讨论】：

没有区别，问题仍然存在，控制台日志显示，值未设置
如果代码在服务器返回值后运行，为什么我可以将值设置为变量？让令牌； this.service.ObterToken().subscribe((data) => token = data); console.log(token);
token = data 应该是 'this.token = data'，如果您尝试在订阅之外访问该数据，它应该是属性，而不是变量
添加属性获取数据值的结果相同
您如何查看数据值？仅供参考，当响应来自 API 时，您将获得该值，如果您想在设置值后调用一个函数，该函数也必须在订阅中执行。

【解决方案2】：

您可以使用此解决方案（将 obserbable 转换为 promise 并添加 async/await）：

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

let token = await  this.TesteToken();

【讨论】：

需要在this.TesteTokens()之前加上await或者您只需将 Promise 保存到 token 变量，并且您只能在异步函数内部使用 await。
如果你这样做，你将来可能会遇到这个问题stackoverflow.com/questions/56092083/…