$ 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代碼從控制器中移出並轉換成服務。您仍然最終調用一個返回承諾的函數，但是可以從控制器中刪除將接收到的數據轉換爲實際需要的數據的代碼。