2015-12-14 2 views
2

Я создал простую тестовую программу, которая извлекает результат json для каждого числа, которое у меня есть в массиве.Обработка отклоненного запроса ajax?

app.controller('myController', function($scope, utils, $sce, $q) 
{ 
    var numbers = [85 , 84, 85 ]; 
    var ctrl = this; 
    var arr = []; 
    var arr2 = []; 
    angular.forEach(numbers, function(v, k) 
    { 
     arr.push(utils.getPosts('http://b1estvision.co.il/poligon/wp-json/wp/v2/media/' + (v))); 
    }); 
    $q.all(arr).then(function(b) 
    { 
     angular.forEach(b, function(v, k) 
     { 
      arr2.push(v.data.source_url) 
     }) 
     ctrl.pics = arr2; 
    }); 
}); 

Таким образом, для каждого номера в [85 , 84, 85 ], я принесу JSON, который имеет утра IMG URL в нем.

Использование $q.all Я жду все jsons быть загружены, а затем я пытаюсь прочитать значение ИНГ URL и поместить его на экране (ctrl.pics) через ng-repeat.

Он отлично работает:

enter image description here

Но если изменить этот массив:

var numbers = [85 , 84, 85 ]; 

к

var numbers = [85 , 0,85 ]; // second request will not be resolved because of "NOT FOUND". 

- Он не покажет мне ничего (из-за отклоненный запрос)

Цель: Я хочу поставить изображение по умолчанию только а для запроса, который был отклонен (скажем, это: http://dummyimage.com/130x40.png/09f/fff/&text=not%20found)

Вопрос

Как я могу изменить мой код так, что я могу поставить по умолчанию изображение для отклоненных обещаний/с.

FULL PLUNKER

Порядок важен! Каждый IMG в HTML должен соответствовать порядку массива чисел

ответ

1

Вы можете сделать свой getPost вернуть обещание, которое всегда есть данные по умолчанию:

 getPosts: function(address){ 
     return $q(function(resolve, reject) { 
      $http({ 
       method: 'GET', 
       url: address 
      }).then(function successCallback(response) { 
       resolve(response); 
      }, function errorCallback(response) { 
       resolve({ 
       data:{ 
        "source_url": "http://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/512/Cute-Ball-Go-icon.png" 
       } 
       }); 
      }); 
     }); 
     } 

http://plnkr.co/edit/sGnFpJH8lZ4gnLI568OR?p=preview

2

Вот возможное решение вашей проблемы:

app.controller('myController', function($scope, utils, $sce, $q) { 
    var numbers = [85, 85, 0]; 
    var ctrl = this; 
    ctrl.pics = []; 

    angular.forEach(numbers, function(v, k) { 
    utils.getPosts('http://bestvision.co.il/poligon/wp-json/wp/v2/media/' + (v)).then(
     function(v) { //success 
     ctrl.pics[k] = v.data.source_url; 
     }, 
     function() { //error 
     ctrl.pics[k] = 'http://dummyimage.com/130x40.png/09f/fff/&text=not%20found'; 
     } 
    ); 
    }); 


}); 

Q.all потерпит неудачу, если какой-либо из обещаний в массиве не удается, см https://github.com/kriskowal/q/wiki/API-Reference:

promise.all()

Возвращает обещание, которое выполнено с массивом, содержащим значение исполнения O каждое обещание или отклоняется с той же категорией отказа, что и первое обещание быть отвергнутым.

Forked plunkr

+0

Это обыкновение поддерживать порядок –

+0

Я обновил свой ответ, чтобы сохранить приказ. Теперь он использует индекс k вместо того, чтобы нажимать url в массив. –

Смежные вопросы