AngularJS工厂函数在初始执行时直接捕获块

函数在初始执行时直接捕获块"/>

AngularJS工厂函数在初始执行时直接捕获块

我正在尝试从dataService调用函数以从数据库中返回值。

问题是，从调试中我可以看到，当首次调用该函数时，promise的.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 Promise的文档，但是我似乎并不完全理解这个概念。

谢谢

我认为您的目标可能是“获得视图加载之前dataService.Favorites的更新值”，但是这并不是您尝试的方式。

首先，您需要了解dataService.getFavourites立即返回1）没有任何结果和2）。如果您想在console.log(dataService.favourites);完成/ user / getFavourite请求之后，再等待它完成。您可以通过返回一个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);
    })
}