Как определить момент получения данных?

Question

Помогите пожалуйста улучшить скрипт.

Есть json-файл. Я подгружаю его и мне нужно точно определить момент когда данные пришли. Вот пример кода. Его слабая сторона в том, что проверка:

  if($scope.news) {
    console.log('OK');
  } else {
    console.log('NOTOK');
  };

выводит в консоль не верную информацию("NOTOK") в то время как данные успешно получены.

для решения проблемы я пробовал обернуть этот код в $timeout (в том же примере соответствующие строки закомментированы).

Но это плохая практика потому что я поставил интервал 1000ms, а при получении json-файла (например с сервера) может случиться задержка и этот интервал будет превышен.

С другой стороны, если с сервера json-файл будет получен быстрее чем за 1000ms, то пользователь будет лишнее время смотреть в экран, на котором ничего не происходит

В общем помогите пожалуйста переписать код по человечески

Привожу полный код:

var app = angular.module('plunker', []);

app.controller('MainCtrl', ['$rootScope', '$scope', '$timeout', '$http', 
function($rootScope, $scope, $timeout, $http) {
    $scope.getNews = function() {
      $http.get('news.json')
        .then(function successCallback(resp){
          console.log('success', resp);
          console.log('data', resp.data);
          console.log('status', resp.status);
          console.log('statusText', resp.statusText);
          $scope.news = resp.data.values;
        }, function errorCallback(resp) {
          console.log('error', resp);
          console.log('data', resp.data);
          console.log('status', resp.status);
          console.log('statusText', resp.statusText);
        });
    };

    $scope.getNews();

    //$timeout(function() {
      if($scope.news) {
        console.log('OK');
      } else {
        console.log('NOTOK');
      };
    //}, 1000);    
}]);

Вы же сами написали successCallback. Вот он - тот момент, когда запрос вернул ответ. — etki, Oct 24 '16 at 08:26
Это да. Но мне хотелось бы чтобы программа вообще состояла из слабосвязанных кусочков. В частности чтобы можно было по очереди вызвать все основные функции, а не одну из другой(чтобы логика не запутывалась при усложнении проекта). так в js не пишут?.. — cyklop77, Oct 24 '16 at 08:45
Вы либо вызываете в конце запроса следующую функцию, либо нет. Можете передавать ее аргументом, если хотеть уменьшить связность. — etki, Oct 24 '16 at 09:22

tutankhamun · Answer 1 · 2016-10-25T16:06:08.183

Рекомендую перед $http.get(... написать return чтобы можно было добавлять обработчики успеха и неуспеха цепочкой из then() после $scope.getNews(). Получится вместо

$scope.getNews();

if($scope.news) {
    console.log('OK');
} else {
    console.log('NOTOK');
};

можно будет писать

$scope.getNews().then(function() {
    console.log('OK');
}, function() {
    console.log('NOTOK');
});

11111000000 · Answer 2 · 2016-10-24T09:25:56.243

-1

первый колбэк Promise .then и есть - этот момент. Но здесь вам не нужно его определять. Суть в том, что $news может быть или не быть - это важно для шаблона. Вот и сделайте шаблон, в котором будет ng-repeat по $news, а если $news не определён или пуст - соответствующий текст. А если хотите фильтровать ответ перед отображением, то .then(filterFn).then(otherFilterFn) - отличное место для этих целей, но Angular filter может быть лучше.

edited Oct 24 '16 at 09:25

answered Oct 24 '16 at 08:45

11111000000

3,599

я не понял, что ты хочешь сказать в своем ответе. Как я понимаю к вопросу относится только первое предложение? – Grundy Oct 24 '16 at 08:52
с какой целью интересуешься? К вопросу относится всё. – 11111000000 Oct 24 '16 at 09:29
с той, что в данный момент не ответ не отвечает навопрос – Grundy Oct 24 '16 at 09:46
По прежнему считаю, что отвечает. Внимание вопрошающего резонно обращено на, архитектурно обусловленную для Angular, точку связи модели и представления. Декларативный биндинг в слое представления характерен и общепринят для это фреймворка. Далее рассмотрена наиболее очевидная задача, ради которой автор собирается "определить момент получения данных" - и обращено внимание, что, нежели попытки императивно контролировать асинхронные процессы, лучше использовать чистые функции и фильтры. Далее, опять-же, в случае Angular, каноничнее - | filter в шаблоне. – 11111000000 Oct 25 '16 at 16:34

Как определить момент получения данных?

2 Answers2