如何将 Angular 8 http 请求返回值保存在变量中？答案

【问题标题】：how to save angular 8 http request return value in a variable?如何将 Angular 8 http 请求返回值保存在变量中？
【发布时间】：2019-11-27 00:14:31
【问题描述】：

我在 Angular 中进行 http 调用，如下所示：

this.values = this.http.get("https://reqres.in/api/users/2").subscribe(data => console.log(data))
console.log(this.values)

现在第一行的console.log，打印data变量，打印正确的返回结果，就是json格式的数据。我试图做的是将返回值保存在 this.values 变量中，但它不起作用。 this.value 变量正在返回一个包含一些与我的返回值无关的奇怪信息的对象。

下图显示了控制台日志：

this.values 返回图片顶部的对象而不是底部的json，由console.log(data)返回

如何将 http 返回值保存到 this.value 变量中？

【问题讨论】：

标签： angular http httpclient

【解决方案1】：

this.http.get("https://reqres.in/api/users/2").subscribe(data => {
  console.log(data);
  this.values = data;
}

当您将http.get 方法分配给值时，您正在分配对可观察对象本身的引用。您想调用 observable 并更改订阅附带的回调中的值。

【讨论】：

使用你的方法，当console.log，this.values，它被打印为未定义。我不明白为什么它不将数据存储在其中。我已将变量值声明为任何类型，您认为这可能是个问题吗？
this.values 不会在响应到达时未定义。您只看到 undefined 因为您在 http 请求之后立即执行 console.log(this.value)。移动订阅回调中的行，如...subscribe(data => {this.values = data; console.log(data); console.log(this.values)});

【解决方案2】：

这可能对正在查看此问题的人有用。

以下获取和存储数据的方法让您可以通过 toPromise() 使用 async 和 await。

在函数中使用async和await会导致代码等待api返回。

async get(){
    var data = await this.http.get(this.url).toPromise(); //returns a json 
    var dataString = data.toString(); //Stringify the json to turn it to object
    var dataObj = JSON.parse(dataString);

    this.agenciesData = dataObj; //assign your variable to it
}

【讨论】：