如何在变量中保存 angular 8 http 请求返回值？

Question

我以 angular 进行 http 调用，如下所示：

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

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

下图显示了控制台日志：

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

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

Answer 1

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

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

Answer 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
}