AngularJS фабричная функция сразу перехватывает блок при первоначальном выполнении - PullRequest
Новая
       9

AngularJS фабричная функция сразу перехватывает блок при первоначальном выполнении

0 голосов
/ 08 мая 2020

Я пытаюсь вызвать функцию из моего dataService, чтобы вернуть значение из моей базы данных.

Проблема в том, что при первом вызове функции я вижу, что при первом вызове функции .then Похоже, что обещание сначала пропускается, и оно переходит прямо к блоку catch.

Представление затем загружается с начальным значением dataService.favourites, которое является пустым массивом, в отличие от обновленного значения, которое возвращает функция getFavourites, затем функция выполняет блоки .then и получает данные из базу данных, но на данный момент уже слишком поздно, поскольку контроллер уже инициализирован исходным пустым массивом с завода.

node.js функция для вызова базы данных ... 

app.get('/user/getFavourites', function (req, res) {

    User.find({ username: req.session.passport.user }, 'favourites', function (err, docs) {
        if (err) {
            res.status(400).send("Couldn't get favourites")
        } else {
            res.status(200).send(docs);
        }
    })
        .lean();
})

Функция на фабрике angularJS ... 

      getFavourites: function () {
        $http.get('/user/getFavourites')

          .then(function (response) {
            return $http.get('/user/getFavourites')
          })

          .then(function (response) {
            this.favourites = [...response.data[0].favourites];
            return this.favourites;
          })

          .catch(function (response) {
            console.log(response);
          })
      }

    })

Контроллер, в котором я вызываю функцию ... 

  dataService.getFavourites();

    console.log(dataService.favourites);

Наконец, вид ... 

        <div class="col-sm-5 col-lg-2 cocktailResultsContainer" ng-repeat="favourite in dataService.favourites">
            <button class="btn deleteFavouriteButton" ng-click="deleteFavourite()"><i
                            class="fas fa-times fa-3x"></i></button>
            <a href="#!CocktailDetails" ng-click="selectedCocktail($index)">
                <h3 class="text-center cocktailHeader"><strong>{{favourite.cocktailName}}</strong></h3>
                <img ng-src="{{favourite.cocktailImage}}" alt="Cocktail image" class="cocktailImageSearchResult">
            </a>
        </div>

Что я здесь делаю не так? По сути, моя цель - получить обновленное значение dataService.Favourites до загрузки представления.

Я прочитал некоторую документацию по AngularJS обещаниям, но мне кажется, что я не полностью понимание концепции.

Спасибо

1 Ответ

1 голос
/ 08 мая 2020

Я думаю, ваша цель - получить «обновленное значение dataService.Favourites до загрузки представления» может быть возможна, но не так, как вы пытаетесь это сделать.

Во-первых, вам нужно понять, что dataService.getFavourites возвращает 1) ничего и 2) сразу. Если вы хотите console.log(dataService.favourites); после завершения запроса / user / getFavourite, вам нужно дождаться его завершения sh. Вы делаете это, возвращая Promise. Вы также делаете запрос во второй раз для первого блока then. Это должно выглядеть примерно так: 

getFavourites: function () {
  return $http.get('/user/getFavourites')

    .then(function (response) {
      this.favourites = [...response.data[0].favourites];
      return this.favourites;
    })

    .catch(function (error) {
      console.log("Failed to request /user/getFavourites", error);
    })
}

Затем вы можете дождаться его, вызвав then для возвращаемого значения, которое является обещанием. 

dataService.getFavourites()
  .then(function() {
    console.log(dataService.favourites);
  })

Но это все равно не даст вам того, что вы хотите. Вызов этого из контроллера не заставит Angular ждать рендеринга компонента во время выборки данных. Вы можете использовать $ routeProvider, чтобы заставить Angular ждать. Касса https://docs.angularjs.org/api/ngRoute/provider/ $ routeProvider. В частности, проверьте свойство разрешения в параметре маршрута.

Другое решение, которое довольно распространено, - разработать состояние «загрузки» для вашего шаблона компонентов - то, что он может отображать, пока вы ждете загрузки данных. . Когда загрузка данных завершается, вы используете привязку данных angular для обновления шаблона.

И еще одно решение - создать «пустое» состояние, чтобы ваш компонент выглядел, когда нет данных и затем обновляя его, когда данные закончат загрузку.

...