Angular http get调用保存对变量的响应？答案

【问题标题】：Angular http get calls saving response to a variable?Angular http get调用保存对变量的响应？
【发布时间】：2020-08-29 21:15:52
【问题描述】：

我对角度有点陌生，我有一个问题，我可以控制台记录来自“get”的响应，但是当我尝试将它保存到变量时，变量总是空的。我认为它与异步有关，因为我看到控制台在从订阅内部打印数据之前试图打印出响应变量。这只是简单的代码，但我认为它说明了我的问题。

response;

constructor(private http: HttpClient) {
this.getResponse();
console.log(response);
}

getResponse() {
return this.http.get(URL).subscribe((data) => {
this.response = data;
console.log(data);
);
}

在此示例中，第二个控制台日志 console.log(data) 打印出适当的响应，但第一个控制台日志 console.log(response) 为空白。令人沮丧的是，我发现使用 http get 的每一个堆栈溢出响应都只是控制台记录响应，而不是显示如何正确存储响应并在以后访问它！我需要做什么才能将 get 的响应存储到变量中，然后才能使用该变量？

【问题讨论】：

第一个console.log是空白的，因为信息还没有，这是一个异步调用，需要一些时间才能得到响应并执行回调
这能回答你的问题吗？ How do I return the response from an Observable/http/async call in angular?

标签： angular http frontend

【解决方案1】：

像这样尝试，并尝试检查您是否从您的请求中得到响应

let response: string = "blue";

constructor(private http: HttpClient) {
this.getResponse();
console.log(response);
}

getResponse() {
return this.http.get(URL).subscribe((data) => {
this.response = data.toString;
console.log(data);
);
}

【讨论】：

构造函数中的console.log(response)仍然不会注销异步值，因此需要将其删除。

【解决方案2】：

我建议在 ngOnInit 中实现您的后端调用。 Http 请求是异步任务，这意味着它需要一些时间来获得响应，这就是为什么你的第一个 console.log(response) 为空，因为答案还没有发生。如果你想存储接收数据，试试这个：

  response;

  constructor(private http: HttpClient) {

  }

  ngOnInit() {
    return this.http.get(URL).subscribe((data) => {
      this.response = data;
      console.log(response);
      );
  }

}

您也可以使用承诺并等待响应，但您不必这样做，这应该可以工作

【讨论】：