角回调API添加错误消息，如果失败 [英] angular callback api add error message if fails

问题描述

我目前正在写一个应用程序角度与Flickr的API进行通信。为了利用来自Flickr的响应，你需要定义一个 jsonFlickrFeed 回调函数。请参阅<一个href=\"http://stackoverflow.com/questions/28373389/printing-flickr-api-response-to-console-angularjs\">answer这里的详细信息，这是如何工作

I am currently writing an Angular application that communicates with the flickr API. In order to utilise the response from flickr you need to define a jsonFlickrFeed callback function. Please see answer here for details on how this works

一切都在我的角度应用工作的罚款。我得到的反应，并在屏幕上显示的数据。

Everything is working fine in my angular app. I am getting the response and showing the data on the screen.

不过，改进UX，我想显示错误信息给用户，如果数据不加载，但我无法弄清楚如何显示此消息。 我的方式以为它会工作，始终记录一个错误的方式API的作品。请参阅我下面的尝试：

However, to improve UX I would like to show an error message to the user if the data does not load, but I cannot figure out how to display this message. The way I thought it would work, always logs an error the way the API works. Please see my attempt below:

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);
   } 
});

和这里是工厂，我使用，使GET请求到Flickr

and here is the factory I am using to make the GET request to Flickr

app.factory('getFlickrData', function($http){
    return{
        getData: function(){
            return $http.jsonp('https://api.flickr.com/services/feeds/photos_public.gne?tagmode=all&format=json');
        }
    }
});

记录在控制台中的ERR看起来是这样的：

The err logged in the console looks like this:

{data: undefined, status: 404, config: Object, statusText: "error"}

和终于在这里是在 HTML 这是始终显示，即使在成功加载内容。

and finally here is the html which is always shown, even if the content loads successfully.

<div ng-show="testCtrl.error" class="error">
   <p>Sorry but there has been an error with loading content. Please try again soon.</p>
</div>

我想总结一下我的问题是如何检查回调成功/失败（可能）

I guess to sum up my question is how to check success/failure of a callback (possibly)

下面是一个的jsfiddle ，可能更容易看到我试图解决的问题。

Here is a jsfiddle that may make it easier to see the problem I am trying to solve

推荐答案

希望这不会让你失望了：）

Hope this wont fail you anymore :)

据$ HTTP AngularJS API没有最后只有成功和错误都可以在这里使用。

According to AngularJS API in $http there was no finally only success and error can be used here.

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

这篇关于角回调API添加错误消息，如果失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！