在AngularJS中是如何實現資料非同步呼叫的？
阿新 • • 發佈：2019-02-01
$q服務是AngularJS封裝的一種輕量級的 Promise實現。$q服務既可呼叫它的構造器（呼叫構造器時返回一個Promise物件），也可呼叫如下方法。
1.defer()：建立一個deferred物件，這個物件可以執行幾個常用的方法，比如resolve、reject和notify等方法。
2.all（）：傳入Promise的陣列，用於批量執行，該方法也返回一個Promise物件。
3.when（）：傳入一個不確定的引數，如果引數符合Promise標準，就返回一個Promise物件。
下面先示範如何呼叫$q的構造器來返回Promise物件。
<script type="text/javascript" src="angular-1.6.2.js">
</script>
</head>
<body ng-app="qApp" ng-controller="fkCtrl">
<script type="text/javascript">
function loadData(url)
{
console.log("從"+url+"載入資料");
return "瘋狂前端開發講義";
}
angular.module("qApp",[])
.controller("fkCtrl",function($scope,$q){
function asyncTask(url){
return $q(function(resolve,reject)//使用$q()構造器將一個函式封裝成Promise物件，然後即可呼叫 Promise物件的resolve和reject兩個函式。此外，呼叫$q服務的defer()方法即可得到一個Deferred物件。程式呼叫該物件的promise屬性同樣可以返回一個Promise物件。下面示例示範了$q服務的defer（）方法的功能和用法。
<script type="text/javascript" src="angular-1.6.2.js"> </script> </head> <body ng-app="qApp" ng-controller="fkCtrl"> <script type="text/javascript"> function loadData(url) { console.log("從"+url+"載入資料"); return "瘋狂前端開發講義"; } angular.module("qApp",[]) .controller("fkCtrl",function($scope,$q){ function asyncTask(url){ var deferred=$q.defer(); setTimeout(function() { deferred.notify('開始呼叫loadData方法'); var data=loadData(url); if(data){ deferred.resolve(data); }else{ deferred.reject('載入資料失敗'); } },1000); return deferred.promise; } var promise=asyncTask('server.html'); promise.then(functin(data){ console.log('成功載入資料：'+data); },function(reason) { console.log('失敗：'+reason)； },function(update) { console.log('收到通知：'+update); }); }); </script> </body>