Javascript 为什么async/await会打破$http.get/angular digest循环？

请查看以下Angular 1.x控制器：

class RootController
{
    constructor($http)
    {
        this.variable = "apples";
        // this.test($http);      -- this works
        // this.asyncTest($http); -- this doesn't
    }

    async asyncTest($http)
    {
        await $http.get('/api/someApiCall');
        this.variable = "oranges";
        // await $http.get('/api/someApiCall'); -- this makes this method work
    }

    test($http)
    {
        $http.get('/api/someApiCall').then(() => {
            this.variable = "oranges";
        });
    }
}

如果我们取消注释构造函数中两个注释掉的行中的一行，我们会得到不同的行为。如果我们运行

test（）

，则

variable

会更新值“oranges”，并按预期显示在视图中。如果我们运行

asyncTest（）

，视图将继续显示“apples”，直到有东西强制生成摘要（出于某种原因，在文本框中单击和单击似乎可以实现此目的）

另一个奇怪的问题是，如果我们取消注释

asyncTest（）

中的第二个

wait

，那么该方法现在可以按预期工作

---

为什么会发生这种情况，为什么第二个

会等待它

修复？我认为，

await

对于

then

，几乎只是语法上的甜点，所以它们应该是完全等价的。我发现一些文章讨论了这个问题，但它们更多的是关于如何解决这个问题，而不是在幕后发生的事情。

据我所知，Javascript中的异步等待功能是使用承诺和生成器的巧妙组合实现的，这对我来说太聪明了，无法详细解释。但如果您感兴趣，可以看看这些：

因此，由于承诺已得到解决，并且角度脏检查/消化循环将在生成器生成之前完成，因此您的

this.variable=“oranges”asyncTest

函数中的code>不会反映在UI中。 但是当您添加注释掉的行

时，等待$http.get（'/api/someApiCall'）

在

asyncTest

功能中，脏检查/摘要循环将再次触发，从而更新UI。当您将焦点从某些字段（如文本框）外时，也会发生同样的情况

---

因为在

test

函数中，您正在执行

this.variable=“oranges”在
内部，然后
，一切正常。
您是否使用巴贝尔转换异步等待？如果是这样，您使用的是什么插件或转换？@ajaybc Nope，这都是纯javascript。我写的是浏览器运行的内容。$http返回一个可观察的、异步的/await表示承诺。请尝试
等待$http.get（“”）.toPromise（）
@Baruch，因为它返回一个
HttpPromise
..@Baruch，不幸的是，您错误地假设了它