$http获取逻辑只允许200 OK状态码

Question

我正在尝试为我的API编写一些逻辑，以便排除具有字段“image”中URL的对象，该字段返回4xx、5xx或超时超过4000ms的情况。

下面的代码不完全正确，因为它仍然允许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);
        });

      })

- Ycon

---

创建一个图像加载器指令，使用本地图像加载和错误回调。不会遇到使用ajax时可能出现的CORS问题。 - charlietfl

我没有遇到CORS问题（我认为）。你能举个例子吗？ - Ycon

在指令中... element.on('load', function(... 和 element.on('error', func... - charlietfl

Answer 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 :''}}">

它工作得很好。

- pritesh

Answer 2

Plunker

我在<td-card ng-if="card.image" ng-repeat="card in cards"中添加了ng-if="card.image"...

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

- Wilmer SH

---

再想一想，也许可以有一个布尔值来指示图像是否已加载，并在每个图像上使用ng-if。 - Wilmer SH

你能用一个布尔值的例子来示范一下吗？你在 Plunker 上的更改没有生效。 - Ycon

我更新了plunker。我在'getApiData()'中为每个卡片添加了布尔属性，并将默认值设置为false。然后，在承诺的成功函数中，我将其设置为true。在html方面，通过在ng-repeat上使用ng-show，模板直到图像加载完毕才会显示。而使用ng-if，则在图像加载完毕之前不会呈现模板。我认为这回答了你关于加载的问题。何时以及如何使用解决方案是一个设计选择。 - Wilmer SH

我不太明白，而且你的 Plunker 示例也无法使用。你能否请检查一下？ - Ycon