В Angular 1.4 в контроллере можно ли вставить «события» для выполнения до запроса $ http и после успеха / ошибки?

Question

У меня есть приложение Angular UI, которое должно выполнять много запросов данных. Как обычно, мне нужен отзывчивый пользовательский интерфейс, даже когда вызываемые API не так быстро возвращают результаты. Это означает, что мне нужно довольно часто переводить приложение в состояние " Загрузка ... ".

Я могу сделать это, установив флаг загрузки, при котором пользовательский интерфейс Angular отключается когда состояние изменяется, но это выглядит примерно так:

$scope.requestFooData = function() {

   var parameters = $scope.BuildFooParams();

   //'loadingData' is a state variable that the UI uses 
   //for disabling regions, or showing spinners where 
   //and when applicable.
   $scope.loadingData = true;
   $http.get("API/getFoo" + parameters)
       .success(function(data) {
           //Handle data
           $scope.loadingData = false;
       })
       .error(function() {
           //Address the error
           $scope.loadingData = false;
       });
}

Это работает, но я должен помнить, что нужно интегрировать как минимум три строки кода в каждый запрос. Не только это, но мне, возможно, придется похоронить некоторые вызовы API в рамках последующих успешных вызовов API, каскадных запросов API. В этом случае было бы неплохо подключить семафор, который может определить, когда правильно устанавливать состояние загрузки. Этот лог c становится немного более сложным и запутанным при таком подходе.

Есть ли способ, что при инициализации моих контроллеров я могу внедрить метод, который срабатывает при выполнении любого веб-запроса (GET / POST / et c.) и когда результаты возвращаются, запускается другое событие для очистки состояния?

Answer 1

Сброс флага счетчика можно поместить в блок .finally:

$scope.loadingData = true;
$http.get("API/getFoo" + parameters)
  .then(function(response) {
    var data = response.data;
    //Handle data
    ̶$̶s̶c̶o̶p̶e̶.̶l̶o̶a̶d̶i̶n̶g̶D̶a̶t̶a̶ ̶=̶ ̶f̶a̶l̶s̶e̶;̶
}).catch(function(response) {
    //Address the error
    ̶$̶s̶c̶o̶p̶e̶.̶l̶o̶a̶d̶i̶n̶g̶D̶a̶t̶a̶ ̶=̶ ̶f̶a̶l̶s̶e̶;̶ 
}).finally(function() {
    $scope.loadingData = false;
});

Блок .finally позволяет вам наблюдать за выполнением или отклонением обещания, но сделать это без изменения окончательного значения. Это полезно для освобождения ресурсов или выполнения некоторой очистки, которая должна быть выполнена независимо от того, было ли обещание отклонено или разрешено.

Для получения дополнительной информации см.

• AngularJS $ q Справочник по API службы - API Promise

Answer 2

Вы также можете использовать перехватчики для Angular. js 1.4, проверить документацию там . Идея та же, что описана Iga Uga - создать сервис, фиксирующий состояние http-запросов. Я могу использовать эту службу в любом месте приложения, чтобы затем отобразить значок загрузчика, пока идет http-запрос, или сделать что-то еще.

Кстати: более старые angular версии названы angular. js и более новые версии, начинающиеся с Angular 2, просто Angular.

Answer 3

Вы должны использовать HttpInterceptor. Например, создайте некоторый AppStateService с занятым логическим свойством, привяжите к нему некоторую разметку и затем создайте httpintercepter, который установит это свойство в соответствии с состоянием запроса.