$ http in angularjs не работает

Question

У меня есть часть кода в angularjs. Если я жестко кодирую значение ответа HTTP, он отображает ответ, когда я использую метод http в angularjs, который он не отображает. Всякий раз, когда запрос отправляется на сервер, я получаю функцию ошибки. Я не знаю, где я ошибаюсь. Вот код

(function() { 
 
    'use strict'; 
 
    angular 
 
    .module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']) 
 
    .controller('DemoCtrl', DemoCtrl); 
 

 
    function DemoCtrl($timeout, $q, $log, $http, $scope) { 
 
    var self = this; 
 

 
    self.simulateQuery = false; 
 
    self.isDisabled = false; 
 

 
    self.repos = loadAll(); 
 
    self.querySearch = querySearch; 
 
    self.selectedItemChange = selectedItemChange; 
 
    self.searchTextChange = searchTextChange; 
 

 

 
    function querySearch(query) { 
 
     var results = query ? self.repos.filter(createFilterFor(query)) : self.repos, 
 
     deferred; 
 
     if (self.simulateQuery) { 
 
     deferred = $q.defer(); 
 
     $timeout(function() { 
 
      deferred.resolve(results); 
 
     }, Math.random() * 1000, false); 
 
     return deferred.promise; 
 
     } else { 
 
     return results; 
 
     } 
 
    } 
 

 
    function searchTextChange(text) { 
 
     $log.info('Text changed to ' + text); 
 
    } 
 

 
    function selectedItemChange(item) { 
 
     $log.info('Item changed to ' + JSON.stringify(item)); 
 
    } 
 

 

 
    function loadAll() { 
 
     $log.info('test'); 
 

 
     var repos; 
 
     repos = []; 
 

 
     $http.get('http://melkban24.ir/city/json/2').success(function(response) { 
 
     $scope.repos = response.data; 
 

 
     }); 
 

 
     return repos.map(function(repo) { 
 
     repo.value = repo.nameCity.toLowerCase(); 
 
     $log.info(repo.value); 
 
     return repo; 
 
     }); 
 
    } 
 

 

 
    function createFilterFor(query) { 
 
     var lowercaseQuery = angular.lowercase(query); 
 

 
     return function filterFn(item) { 
 
     return (item.value.indexOf(lowercaseQuery) === 0); 
 
     }; 
 

 
    } 
 
    } 
 
})();

Answer 1

$http.get() является асинхронным, поэтому .success() обратного вызова не будет вызываться до тех пор, после того, как ваша функция вернулась. Это означает, что loadAll() не может вернуть данные. Старайтесь не путать $scope.repos с локальной переменной repos, так как они совсем разные.

Не используйте устаревший метод .success(). Используйте .then(), поскольку он вернет обещание, совместимое с другими применениями обещаний в угловом.

Переведите код карты внутри обратного вызова .then и, если хотите, loadAll(), чтобы вернуть что-либо, возвратите обещание, которое возвращает .then(). Таким образом, все, что называет loadAll(), может дождаться обещания завершить.

function loadAll() { 
    return $http.get('http://melkban24.ir/city/json/2').then(function(result){ 
     var repos = result.data.data; 
     return repos.map(function (repo) { 
      repo.value = repo.nameCity.toLowerCase(); 
      return repo; 
     }); 
     $scope.repos = repos; 
     }); 
} 

Теперь у вас есть два способа получения данных: оно будет отображаться в качестве значения repos в объеме, когда он был получен. Если используется в угловом шаблоне, страница покажет новые данные. Или позвоните loadAll() и использовать обещание получить в возвращаемых данных:

loadAll().then(function(repos) { ... }); 

Вы должны также рассмотреть возможность включения кода для случая, когда $http.get() терпит неудачу. Пропустите также обратный вызов ошибки.

Кроме того, как отмечает @Rakeschand в комментариях, следующим шагом должно быть перемещение всего кода $http из контроллера и в сервис. Вы все еще вызываете функцию, которая возвращает обещание, но код для преобразования полученных данных в нужные вам данные можно удалить из контроллера.