angularJs同步請求

今天在寫幾級聯動的時候，因為比如上一個接口請求數據成功返回后，才能根據上一個接口返回的數據請求下一個接口，以此類推；因此有了同步請求的想法。

在前端做同步讀取顯然不是好的實踐做法，同步之后會嚴重影響前端的體驗和性能

AngularJS提供了一個內置Service $q，它提供了一種承諾/延后（promise/deferred），可以保證我們的調用代碼一定能夠拿到數據。當然，我們可以猜到，最后去服務器取數據的方式肯定是異步的。只不過這個服務提供了表面上是同步訪問的API，當數據獲取成功之后，自動將數據提供給調用的代碼。

// $q 是內置服務，所以可以直接使用  
ngApp.factory('UserInfo', ['$http', '$q', function ($http, $q) {  
  return {  
    query : function() {  
      var deferred = $q.defer(); // 聲明延后執行，表示要去監控后面的執行  
      $http({method: 'GET', url: 'scripts/mine.json'}).  
      success(function(data, status, headers, config) {  
        deferred.resolve(data);  // 聲明執行成功，即http請求數據成功，可以返回數據了  
      }).  
      error(function(data, status, headers, config) {  
        deferred.reject(data);   // 聲明執行失敗，即服務器返回錯誤  
      });  
      return deferred.promise;   // 返回承諾，這里並不是最終數據，而是訪問最終數據的API  
    } // end query  
  };  
}]);  

 

2. 在Controller上使用這個Service：

 

angular.module('ngApp')  
  .controller('MainCtrl', ['$scope', 'UserInfo', function ($scope, UserInfo) { // 引用我們定義的UserInfo服務  
    var promise = UserInfo.query(); // 同步調用，獲得承諾接口  
    promise.then(function(data) {  // 調用承諾API獲取數據 .resolve  
        $scope.user = data;  
    }, function(data) {  // 處理錯誤 .reject  
        $scope.user = {error: '用戶不存在！'};  
    });  
  }]);