AngularJS — скрипт не дожидается результата http.post

Question

При помощи AngularJS пытаюсь получить список пользователей через http.post и проверить, есть ли в массиве нужный логин. Проблема в том, что ответ от http.post приходит поздно — скрипт успевает отвалиться с ошибкой undefined (GetUsers() возвращает undefined). Изначально результаты проверялись из localStorage - они возвращались моментально и проблемы не было.

(function () {
    'use strict';

    angular
        .module('app')
        .factory('UserService', UserService);

    UserService.$inject = ['$timeout', '$filter', '$q', '$http'];
    function UserService($timeout, $filter, $q, $http) {

        var service = {};
        service.GetByUsername = GetByUsername;
        return service;

        function GetByUsername(username) {
            var deferred = $q.defer();
                var filtered = $filter('filter')(getUsers(), { user_login: username });
                var user = filtered.length ? filtered[0] : null;
                deferred.resolve(user);
                return deferred.promise;
        }
        function getUsers() {

            var config = {
                headers : {
                    'Content-Type': 'application/json'
                }
            }
            $http.post('/post/get_users', {}, config).then(function successCallback(response) {
                return response;
            }, function errorCallback(response) {

            });
        }
}
})();

Собственно, весь вопрос в том, как сделать так, чтобы скрипт «дождался» ответа от getUsers(), перед тем как делать эту проверку:

var user = filtered.length ? filtered[0] : null;

Сейчас скрипт всегда отдаёт Cannot read property 'length' of undefined, не дожидаясь ответа getUsers().

score 0 · Accepted Answer · answered Feb 04 '19 at 09:23

$htt.post (в моем примере $http.get) возвращают promise. Поэтому имеет смысл дождаться его разрешения (окончания) в функции getUsers и обработать полученные результаты. Примерно следующим образом ($filter заменил на filter для краткости):

(function() {
  'use strict';
angular.module('app', []);
angular
    .module('app')
    .factory('UserService', UserService);
UserService.$inject = ['$timeout', '$filter', '$q', '$http'];
function UserService($timeout, $filter, $q, $http) {
var service = {};
service.GetByUsername = GetByUsername;
return service;

function GetByUsername(username) {
  var deferred = $q.defer();

  getUsers()
    .then(function(users) {
      var filtered = users.filter(function(user) {
        return (username === user.name);
      });
      var user = filtered.length ? filtered[0] : null;
      deferred.resolve(user);
    });

  return deferred.promise;
}

function getUsers() {
  var deferred = $q.defer();
  var config = {
    headers: {
      'Content-Type': 'application/json'
    }
  }
  $http.get('https://jsonplaceholder.typicode.com/users', {}, config).then(function successCallback(response) {
    deferred.resolve(response.data);;
  }, function errorCallback(response) {

  });
  return deferred.promise;
}

}
angular.module('app')
    .controller('exampleController', exampleController);
exampleController.$inject = ['UserService'];
function exampleController(UserService) {
    UserService.GetByUsername('Leanne Graham')
      .then(function(user) {
        console.log(user);
      });
  }
angular.bootstrap(
    document.getElementById('root'), ['app']
  );
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div id="root">
  <div ng-controller="exampleController"></div>
</div>

AngularJS — скрипт не дожидается результата http.post

1 Answers1