我正在尝试从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);
})
}
然后您可以通过在返回值上调用then
来等待它,这是一个承诺。
dataService.getFavourites()
.then(function() {
console.log(dataService.favourites);
})
但是那仍然无法满足您的需求。从控制器中调用它不会使Angular在获取数据时等待渲染组件。您可能可以使用$ routeProvider进行Angular等待。结帐https://docs.angularjs.org/api/ngRoute/provider/ $ routeProvider。具体来说,请检查路由参数上的resolve属性。
另一种非常普遍的解决方案是为组件模板设计一个“正在加载”状态-在等待数据加载时可以呈现的状态。然后数据完成加载,您可以使用angular的数据绑定来更新模板。
另外一种解决方案是设计一个“空”状态,在没有数据时让您的组件寻找,然后在数据加载完成后对其进行更新。