Question

我目前正在编写一个与flickr API通信的Angular应用程序。为了利用flickr的响应，您需要定义jsonFlickrFeed回调函数。请参阅answer here for details on how this works

在我的角度应用程序中，一切正常。我收到回复并在屏幕上显示数据。

但是，为了改进UX，如果数据没有加载，我想向用户显示一条错误消息，但我无法弄清楚如何显示此消息。我思考的方式可行，总是以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，可以让我更容易看到我想要解决的问题

Answer 1

希望这不会再让你失望了:)）

根据$ 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");
        }
    }
});

angular callback api如果失败则添加错误消息

1 个答案: