AngularJS $http 同步處理

今天在修改angularjs踩到顆地雷

主要是因為以下的code

function init() {
    $scope.item.list = getList();
}

function getList() {
    var items = new Array();
    $http.get(URL).then(function(data) {
        items = data;
    },function (res) {
        items = [{"error":"queryFailed"}]
    });

    return items;
}

這樣在console.log叫出來看，$scopr.item.list會變成 [] 中間沒有東西

原因是在呼叫函式後，$http做的是Ajax的動作，他要去從遠端把資料拉出來

可是問題是這樣的傳輸需要時間，結果在傳輸狀態下return先被啟用了

花了有點長的時間去查詢解決辦法

我之前就有發生過這樣的問題，然後用callback解決掉，可是這樣搞總不是辦法，而且也不是我要的東西

後來採用了promise以及宣告的順序解決掉這個問題

這個例子中就是模仿我專案的情況，首先先開始init的function再進行getList的請求

執行後$scopr.item.list就會出錯

於是我將它改成以下的方式

function pre(){
    getList().then(function(data){
        onInit(data)
    });
}

function onInit(items) {
    $scope.item.list = getList();
}

function getList() {
    var items = new Array();
    var deferred = $q.defer();
    $http.get(URL).then(function(data) {
        deferred.resolve(data);
    },function (res) {
        items = [{"error":"queryFailed"}]
        deferred.resolve(items);
    });

    return deferred.promise;
}

pre();

這樣的情況就是先取檔案再開始進行初始化的動作

這樣解法並不算漂亮，事實上應該多開一個module做一個service才對，不過...目前就先這樣吧