Angularjs: как я могу сделать код обслуживания «смотреть синхронно»?

Question

Как я могу сделать угловой код обслуживания «смотреть синхронно»?

Мои вопросы возникли, когда я очистил контроллер и поместил код бизнес-логики в службу. Все идет нормально. Теперь я хотел бы «подождать» в службе, пока все асинхронные вызовы не вернутся и затем. Как я могу это сделать?

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

1. запросов некоторые данные из внутреннего интерфейса
2. делает некоторую обработку с данными и
3. руки данные через к области

Как что:

Dat аСопЬгоНег перед тем рефакторинга:

$scope.submitForm = function() { 

    RestBackend.query('something').then(function(data) { 

     // do some additional things ... 
     ... 

     $scope.data = data; 
    }); 
}; 

Довольно просто. Извлечь данные и заполнить область.

После рефакторинга в контроллер + службы, я закончил с:

DataController реорганизованным:

$scope.submitForm = function() { 

    DataService.getData().then(function(data) { 
     $scope.data = data; 
    }); 
}; 

DataService рефакторингу:

this.query = function() { 
    var dataDefer = $q.defer(); 

    RestBackend.query('something').then(function(data) { 

     // do some additional things ... 
     ... 

     dataDefer.resolve(data); 
    }); 
    return dataDefer.promise; 
}; 

Мне не нравится тот факт, что я также должны работать с обещанием в контроллере. Мне нравятся обещания, но я хочу сохранить агностик контроллера этой «детали реализации» службы. Это то, что я хотел бы код контроллера выглядеть следующим образом:

DataController (как это должно быть):

$scope.submitForm = function() { 

    $scope.data = DataService.getData(); 
}; 

Вы получите точку? В контроллере я не хочу заботиться о обещании или нет. Просто подождите, пока данные будут извлечены, а затем используйте их. Таким образом, я искал возможность для реализации сервиса, как это:

1. запроса данных (асинхронно)
2. не возвращают, пока данные не были неправдоподобным
3. возвращения извлеченной данные

Теперь пункт 2. не ясен для меня: как я могу «дождаться получения данных» и только потом продолжить? Цель состоит в том, что функция сервиса выглядит синхронно.

Answer 1

Я думаю, что у вас есть очень хорошее решение. Вам не нужно ждать, пока обещание будет разрешено, оно побеждает цель асинхронного javascript. Просто спросите себя, почему вам нужно запустить синхронизацию?

Если вы полагаетесь в HTML на обещание быть решить, вы можете сделать что-то вроде этого

<div class="alert alert-warning text-center" data-ng-hide="!data.$resolved"> 
    Got data from service. 
</div> 

Answer 2

Я тоже думаю, что ваше решение прекрасно.
Возвращение обещания - это не деталь реализации услуги. Он является частью API сервиса («контракт» между сервисом и потребителем услуг).

Контроллер ожидает обещание, которое разрешает данные и обрабатывает их по своему усмотрению.
Как создается это обещание, как данные извлекаются и т. Д., Это детали реализации.
Вы можете поменять место службы в любое время тем, что делает совершенно разные вещи, пока он выполняет контракт (т. Е. Возвращает обещание, которое разрешается с готовностью данных).

---

Тем не менее, если вы используете только данные в представлении (т.е. не непосредственно манипулировать в контроллере сразу после его неправдоподобный), который, кажется, случая, вы можете использовать ngResources подход:

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

$scope.data = DataService.getData(); 

// DataService refactored: 
this.getData = function() { 
    var data = []; 

    RestBackend.query('something').then(function(responseData) { 
     // do some additional things ... 
     ... 
     angular.forEach(responseData, function (item) { 
      data.push(item); 
     }); 
    }); 

    return data; 
}; 

---

Кстати, в текущем (штраф) установки, вам нужно $q.defer(). Вы можете просто использовать обещание-цепочки:

this.query = function() { 
    return RestBackend.query('something').then(function(data) { 
     // do some additional things ... 
     ... 
     return data; 
    }); 
}; 

Answer 3

Как вы используете ngRoute, я бы порекомендовал вам разрешить вам данные на вашем маршруте конфигурации, и вид будет загружен один все ваши данные будут решены ,

$routeProvider 
    .when('/your-url', { 
    templateUrl: 'path/to/your/template.html', 
    controller: 'YourCtrl', 

    // that's the point ! 
    resolve: { 
     superAwesomeData: function (DataService) { 
     return DataService.getData(); 
     } 
    } 
    }); 

Теперь superAwesomeData может быть введен в контроллере, и он будет содержит данные, решены.

angular.module('youModule') 
    .controller('YourCtrl', function (superAwesomeData) { 

    // superAwesomeData === [...]; 

    });