Посмотрите на следующий контроллер 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 получит обновления значения «апельсины» и отобразит в представлении, как и ожидалось. Если мы запустим asyncTest(), представление продолжит отображать «яблоки», пока что-то не вызовет дайджест (по какой-то причине щелчок в и из текстового поля, кажется, делает свое дело).
Еще одна странная проблема заключается в том, что если мы раскомментируем второй await в asyncTest(), то этот метод теперь работает, как и ожидалось.
Почему это происходит, и почему второй await исправляет это? Я думал, что await был просто синтаксическим сахаром для then, поэтому они должны быть полностью эквивалентны. Я нашел несколько статей, рассказывающих об этой проблеме, но они больше о том, как ее исправить, чем о том, что происходит под капотом.