$http 获取逻辑只允许 200 OK答案

【问题标题】：$http Get logic to only allow 200 OK$http 获取逻辑只允许 200 OK
【发布时间】：2016-05-15 11:46:56
【问题描述】：

我正在尝试在我的 api 中构建一些逻辑，因此它将排除在“图像”字段中具有 URL 的对象，该 URL 返回 4xx、5xx 或超时超过 4000 毫秒。

下面的代码不太好用——因为它仍然允许 404 和空白图像。

谁能建议如何解决这个问题？

另外，它在一个 plunker-http://plnkr.co/edit/7ScnGyy2eAmGwcJ7XZ2Z?p=preview

json 示例：{id:242, image:"www.image.com/1.jpg",name:"blah blah"}

.controller('CardsCtrl', ['$scope', '$http', '$state', '$q', '$ionicLoading', '$ionicModal', 'TDCardDelegate', 'cardsApi', '$http', '$timeout', '$element',
  function($scope, $http, $state, $q, $ionicLoading, $ionicModal, TDCardDelegate, cardsApi, $http, $timeout, $element) {


    var loginuid = window.localStorage.getItem('uid');
    console.log(loginuid);


    var MIN_CARDS = 7;

    console.log('CARDS CTRL');
    $scope.cards = [];

    cardsApi.getApiData()
      .then(function(result) {
        console.log(result.data); //Shows log of API incoming
        $scope.cards = result.data;

        result.data.forEach(function(card) {
          var imgurl = card.image;
          console.log(imgurl);
          var canceler = $q.defer();
          $http.get(imgurl, {
              timeout: canceler.promise
            })
            .then(function mySuccess(response) {
              console.log(response.status);

            }, function myError(response) {
              console.log(response.status);

              if (response.status == 404) {
                $scope.cards.splice(card, 1);
              }
              // console.log('deleted');
              var imgpid = "#card-image-" + card.vari;
              console.log(imgpid);
              $(imgpid).parent().remove();
            })
            .catch(function(err) {

            });
          $timeout(function() {
            $ionicLoading.hide();
            canceler.resolve();
          }, 4000);
        });

      })

【问题讨论】：

创建一个使用本机图像加载和错误回调的图像加载器指令。不会遇到您将使用 ajax 的 CORS 问题
我没有遇到 CORS 问题（我不认为）。你能举个例子吗？
在指令中 ...element.on('load', function(... 和 element.on('error', func...

标签： javascript angularjs http ionic-framework

【解决方案1】：

我将这一行从 :

<img class="storelogo-image" ng-src="{{card.store__logo}}">

到

   <img class="storelogo-image" ng-src="{{card.store__logo.indexOf('http://')> -1 ?card.store__logo :''}}">

而且效果很好。

【讨论】：

【解决方案2】：

The plunker

我将ng-if="card.image" 添加到<td-card ng-if="card.image" ng-repeat="card in cards"...

这将防止模板在没有可用图像的情况下生成和清空图像模板

【讨论】：

再想一想，也许有一个布尔值来指示图像是否已加载，并且 ng-if 在每个图像的布尔值上。
你能给我看一个布尔值的例子吗？您的更改无效（在 Plunker 中）
我更新了the plunker。我将布尔属性添加到“getApiData()”上的每张卡上，默认值为 false。然后，在 promise 的成功函数上，我将其设置为 true。在 html 端，通过在 ng-repeat 上使用 ng-show，模板在图像加载之前不会显示。而使用 ng-if 在图像加载之前不会渲染模板。我认为这回答了你关于加载的问题。在何处以及如何使用该解决方案是一种设计选择。
我不太理解，而且您的 Plunker 示例无法使用它。你能检查一下吗？