Question

所以我试图建立一个非常基本的应用程序，在localhost上有一个Angular项目，从localhost上的另一个项目中获取json。

我有一种方法服务

get() {
    var returnVal;
    this.http.get('http://localhost:8080/getAll).subscribe((response: Response) => returnVal = response.json())
return returnVal;
}

这将返回未定义，并且当我的sub.component.ts将其分配给变量时，它应该返回json时，在html上不显示任何内容。

Answer 1

Http Get是一个异步调用，在Get方法完成之前返回returnVal。您可以在异步调用内返回该值，或等待promise解析。例如：

this.http.get('http://localhost:8080/getAll').subscribe((response: Response) => {
  returnVal = response.json();
  return returnVal;
});

Answer 2

Angular中的HTTP调用返回异步可观察对象-在调用完成后（即在执行“ return returnVal”行之后）将调用订阅。

为了更好地了解Angular应用程序，您应该使用这种异步特性，而不是尝试以同步方式等待它。例如，在您的组件打字稿中：

valueFromServer: any = null; // This should be set to an actual type, not any, ideally.

onButtonPress() {
    this.http.get('http://localhost:8080/getAll').subscribe((response: Response) => {
        this.valueFromServer = response.json();
    });
}

然后在组件模板中，使用以下值进行操作：

<button (click)="onButtonPress()">Load</button>
<p *ngIf="valueFromServer">{{valueFromServer}}</p>
<p *ngIf="!valueFromServer">Not loaded yet.</p>

Angular-如何获取http get请求的json值？

2 个答案: