Question

与Observables相比，我对Promises更为熟悉，因此我在.ts文件中使用了Promise：

response = {};

constructor(private http: HttpClient) {
}

ngOnInit() {
  this.getCallback();
}

async getCallback() {
  console.log("getCallback: calling backend");
  this.response = await this.http.get(this.apiURL).toPromise();
  console.log("getCallback: got answer")
}

async getCallback2() {
    console.log("getCallback2: calling backend");
    const ret = await this.http.get(this.apiURL).toPromise();
    console.log("getCallback2: got answer");
    return ret;
}

和我的.html文件：

<pre> {{ response | json}} </pre>
<pre> {{ getCallback2() | json}} </pre>

这是两种显示（普通）后端调用返回值的不同方法。我所看到的是第一种方法（使用this.response存储结果）可以正常工作：单一调用后端并显示正确的返回值。虽然getCallback2()无限调用后端，但不显示预期的回报。与DOM端的更改检测是否有冲突？我不明白为什么我要观察两种不同的行为。

Answer 1

一旦在视图中添加了{{expression}}之类的Angular表达式，它将被添加到当前作用域的监视列表中。

Angular使用一种称为脏检查的机制来存档双向绑定。每次发生某些特定事件时，Angular都会通过监视列表来检查监视的值是否已更改，此操作称为摘要循环。

这里有一些特定的事件，包括用户输入，模型更改，http请求完成等。当您在表达式中使用函数getLink时，每次Angular触发脏检查/摘要循环时，此函数将执行一次再次检查其返回结果是否已更改。

问题是，这里的getCallback2函数是一个http请求，执行后，Angular将触发另一轮脏检查，这将再次执行此函数...砰，这是一个无限循环。

Angular中的承诺：直接返回时无限调用

1 个答案: