Angular UI-маршрутизатор не обрабатывает функцию разрешения, когда я использую функцию async/await?

Я пытаюсь отобразить определенный шаблон, связанный с состоянием и компонентом, в соответствии с этой статьей

В моем проекте, запущенном под dev-сервером, все работает отлично, и когда я выполняю $state.go("home"), шаблон компонента загружается, как я ожидаю, но когда я это делаю в тестовой среде, это не работает.

Прежде чем при тестировании, когда я использую "старый способ", используя "шаблон" вместо "компонента" с ui-router, выполнить $rootScope.$digest() было достаточно, чтобы добавить шаблон внутри <div ui-view></div>, но используя этот новый способ больше не работает.

Что я делаю неправильно?

Изменить. Я пытался понять суть проблемы, и я вижу, что проблема связана с запросом HTTP, который был выполнен. Возможно, это связано с тем, как мое обещание решает проблему обратного вызова с помощью async/await. Проверьте Сервис:

Сервис 

export class TodoService {
    constructor($http, BASE_URL) {
        this.http = $http;
        this.url = `${BASE_URL}/todos`
    }
    async getTodos() {
        const apiResponse = await this.http.get(this.url)
        return apiResponse.data.todos
    }
}

Ответы

Ответ 1

Проблема заключается в том, что angular ожидает angular Promise, поэтому ваша работа будет работать, но ваш ожидание не будет, вы можете решить эту проблему, используя библиотеку, например: https://www.npmjs.com/package/angular-async-await или создайте конструкцию, как показано здесь https://medium.com/@alSkachkov/using-async-await-function-in-angular-1-5-babel-6-387f7c43948c

Удачи вам в вашей проблеме!

Ответ 2

Это всего лишь образованное предположение, основанное на моем понимании того, как работают resolve -ers и что делает ngMock. В первом примере ваш resolve для getTodos не возвращается до тех пор, пока обещание $http не будет разрешено, после чего вы отбросите значение от ответа и вернете его. Тем не менее, resolve -ers ожидают значение $q.Promise в качестве сторожевого устройства, чтобы удерживать рендеринг маршрутизатора до его разрешения. В вашем коде, в зависимости от того, как он переполняется, скорее всего, вызов await и return не дает правильного значения дозорного значения, поэтому он обрабатывается как синхронный ответ.

Один из способов тестирования - запросить resolve -er в контроллере для вашего компонента todolist и проверить значение. Я буду держать пари, что это НЕ $q.Promise, хотя это может быть родной Promise.

При использовании resolve, однако, просто соедините Promise, добавив then и верните его. Маршрутизатор будет обрабатывать остальные.

Или лучше, переключитесь на Observables! (/me уток входящих помидоров)