$ angularjs中的http不起作用

Question

我在angularjs中有一段代码。如果我对http响应的值进行了硬编码，那么当我在angularjs中使用http方法时，它显示的响应不会显示。每当请求发送到服务器我得到错误的功能。我不知道我在哪里错了。下面是代码

(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代码从控制器中移出并转换成服务。您仍然最终调用一个返回承诺的函数，但是可以从控制器中删除将接收到的数据转换为实际需要的数据的代码。