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

问题描述 投票:0回答:1

我正在尝试从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的文档,但是我似乎并不完全理解这个概念。

谢谢

javascript node.js angularjs promise
1个回答
0
投票

我认为您的目标可能是“获得视图加载之前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);
    })
}

然后您可以通过在返回值上调用then来等待它,这是一个承诺。

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

但是那仍然无法满足您的需求。从控制器中调用它不会使Angular在获取数据时等待渲染组件。您可能可以使用$ routeProvider进行Angular等待。结帐https://docs.angularjs.org/api/ngRoute/provider/ $ routeProvider。具体来说,请检查路由参数上的resolve属性。

另一种非常普遍的解决方案是为组件模板设计一个“正在加载”状态-在等待数据加载时可以呈现的状态。然后数据完成加载,您可以使用angular的数据绑定来更新模板。

另外一种解决方案是设计一个“空”状态,在没有数据时让您的组件寻找,然后在数据加载完成后对其进行更新。

© www.soinside.com 2019 - 2024. All rights reserved.