我目前正在编写一个与 flickr API 通信的 Angular 应用程序。为了利用 flickr 的响应,您需要定义一个 jsonFlickrFeed 回调函数。请参阅answer here for details on how this works
我的 Angular 应用程序一切正常。我正在收到响应并在屏幕上显示数据。
但是,为了改进用户体验,我想在数据未加载时向用户显示一条错误消息,但我不知道如何显示此消息。我认为它的工作方式,总是以 API 的工作方式记录错误。请参阅下面我的尝试:
app.controller('testCtrl', function (getFlickrData) {
var testCtrl = this;
this.loading = true;
this.error = false;
//call to get the data from Flickr
getFlickrData.getData().catch(function (err) {
//show error
console.log(err)
testCtrl.error = true;
})
.finally(function () {
// Hide loading spinner whether our call succeeded or failed.
testCtrl.loading = false;
});
//API requires jsonFlickrFeed callback function
jsonFlickrFeed = function(data){
console.log(data);
}
});
这是我用来向 Flickr 发出 GET 请求的工厂
app.factory('getFlickrData', function($http){
return{
getData: function(){
return $http.jsonp('https://api.flickr.com/services/feeds/photos_public.gne?tagmode=all&format=json');
}
}
});
控制台中记录的错误如下所示:
{data: undefined, status: 404, config: Object, statusText: "error"}
最后是 html,即使内容加载成功,它也会始终显示。
<div ng-show="testCtrl.error" class="error">
<p>Sorry but there has been an error with loading content. Please try again soon.</p>
</div>
我想总结一下我的问题是如何检查回调的成功/失败(可能)
这是一个jsfiddle这可能会让我更容易看到我正在尝试解决的问题
最佳答案
希望这不会再让你失望:)
根据$http中的AngularJS API,这里没有最终只能使用成功和错误。
app.controller('testCtrl', function (getFlickrData) {
var testCtrl = this;
this.loading = true;
this.error = false;
getFlickrData.getData().success(function (data) {
console.log(data);
testCtrl.loading = false;
})
.error(function () {
testCtrl.loading = false;
testCtrl.error = true;
});
})
.factory('getFlickrData', function($http){
return{
data:{},
getData: function(){
var self = this;
return $http.jsonp("https://api.flickr.com/services/feeds/photos_public.gne?tagmode=all&format=json&jsoncallback=JSON_CALLBACK");
}
}
});
关于javascript - 如果失败, Angular 回调 api 添加错误消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35951547/