資訊專欄INFORMATION COLUMN
摘要：回調(diào)函數(shù)有兩個參數(shù)，，分別代表執(zhí)行成功與失敗。有兩個回調(diào)函數(shù)，分別表示執(zhí)行成功和執(zhí)行失敗的回調(diào)，回調(diào)函數(shù)的參數(shù)為在第一步邏輯中標(biāo)記方法傳入的字符串。鏈?zhǔn)讲僮魅绻羞壿嫷膱?zhí)行需要時間等待，那么，中回調(diào)函數(shù)的返回值為對象時，才能夠按順序執(zhí)行。
相信有一些開發(fā)經(jīng)驗的朋友就應(yīng)該知道，對于JavaScript而言，promise十分重要，在開發(fā)中總能用到。因此掌握好它是一件必須做的事情。
我之前寫過一篇文章，工作總結(jié)：jQuery高級應(yīng)用之Deferred對象，介紹jquery中的promise，因此關(guān)于promise的基礎(chǔ)介紹就不再詳細(xì)講解，這篇文章會重點關(guān)注angular中promise的實現(xiàn)。
我們首先有一個簡單的html標(biāo)簽，下面的例子都會基于這個標(biāo)簽來書寫
$q
在angular中，$q是一個非常重要的service。通過$q，angular有兩種比較常用的方式來實現(xiàn)promise，分別是ES6風(fēng)格與jquery風(fēng)格。
ES6風(fēng)格實現(xiàn)我們直接來看看js代碼
angular.module("app", [])
.controller("demoController", function($q, $timeout) {
var a = 1;
$q(function(resolve, reject) {
$timeout(function() {
if(a == 1) {
console.log("resolve");
resolve("hello, JAKE");
} else {
console.log("reject");
reject("JAKE is not here!")
}
}, 2000)
})
.then(function(greeting) {
console.log("success, " + greeting);
}, function(reason) {
console.log("failed, " + reason);
})
})
當(dāng)a==1，輸出結(jié)果為
"resolve" "success, hello, JAKE"
當(dāng)a!=1，輸出結(jié)果為
"reject" "failed, JAKE is not here!"
點我查看實例地址
上例中，我直接將第一步邏輯在$q()中處理。回調(diào)函數(shù)有兩個參數(shù)，resolve, reject，分別代表執(zhí)行成功與失敗。
然后在對應(yīng)的邏輯里面，使用resolve/reject標(biāo)記邏輯的執(zhí)行狀態(tài)。then方法中的代碼會在第一步的邏輯執(zhí)行完了才執(zhí)行，為了證明這一點，我在第一步的邏輯中設(shè)置了2秒的延遲。then會等待第一步執(zhí)行完畢。
then有兩個回調(diào)函數(shù)，分別表示執(zhí)行成功和執(zhí)行失敗的回調(diào)，回調(diào)函數(shù)的參數(shù)為在第一步邏輯中標(biāo)記方法傳入的字符串。如果第一步邏輯執(zhí)行成功，則會執(zhí)行then第一個回調(diào)函數(shù)，如果失敗，則會執(zhí)行第二個回調(diào)。
jquery 風(fēng)格與jquery實現(xiàn)類似，我們需要定義個defer對象，并在第一步邏輯中手動返回promise
angular.module("app", [])
.controller("demoController", function($q, $timeout) {
var a = 1;
$q.when(function() {
var defer = $q.defer();
$timeout(function() {
defer.notify("notify jake.");
if(a == 1) {
console.log("rsolve");
defer.resolve("hello, jake");
}
else {
console.log("reject");
defer.reject("jake is not here.")
}
}, 2000);
return defer.promise;
}())
.then(function(greeting) {
console.log("success, " + greeting);
}, function(reason) {
console.log("fail, " + reason);
}, function(update) {
console.log("notify, " + update);
})
})
當(dāng)a==1，輸出結(jié)果為
"rsolve" "notify, notify jake." "success, hello, jake"
當(dāng)a!=1 輸出結(jié)果為
"reject" "notify, notify jake." "fail, jake is not here."
點擊我查看實例
Angular 中 Promise 的一些方法，其實從上面的實例就已經(jīng)能夠知道promise的大概用法，不算復(fù)雜。
1. then(successCallback, errorCallback, notifyCallback)
從字面上我們就能夠看出then三個回調(diào)的含義，第二個參數(shù)與第三個參數(shù)為可選。
2. catch(errorCallback)
相當(dāng)于 then(null, errorCallback)
3. finally(callback, notifyCallback)
無論promise的返回狀態(tài)是上面，該方法總是會執(zhí)行。
如果then中邏輯的執(zhí)行需要時間等待，那么，then中回調(diào)函數(shù)的返回值為promise對象時，才能夠按順序執(zhí)行。因此需要我們手動返回一個promise對象，例子如下
var app = angular.module("app", []);
app.controller("demoController", function($q, $timeout) {
$q.when(function() {
var defer = $q.defer();
$timeout(function() {
console.log("first");
defer.resolve();
}, 2000);
return defer.promise;
}())
.then(function() {
var defer = $q.defer();
$timeout(function() {
defer.resolve();
console.log("second");
}, 1000);
return defer.promise;
})
.then(function() {
console.log("third");
})
});
"first" "second" "third"
點我查看實例地址
官方文檔中，認(rèn)為then方法中只需要有返回值
但是如果then的執(zhí)行不需要時間等待，then中的回調(diào)函數(shù)的第一個參數(shù)，會獲取到上一個then的返回值，然后按順序執(zhí)行，如下例。
var app = angular.module("app", []);
app.controller("demoController", function($q, $timeout) {
function first() {
var a = 1;
var defer = $q.defer();
$timeout(function() {
if(a == 1) {
console.log("first resolve");
defer.resolve("resolve result");
} else {
console.log("first reject");
defer.reject();
}
}, 2000)
return defer.promise;
}
var promiseA = first();
promiseA.then(function(result) {
// $timeout(function() {
console.log("second, " + result);
return "document";
// }, 1000)
})
.then(function(result) {
console.log("third, " + result);
})
});
輸出結(jié)果為
"first resolve" "second, resolve result" "third, document"
點我查看實例地址
因為表述起來并不是那么容易，因此建議大家通過實例慢慢理解。
$http$http是對promise的最佳實踐。由于controller生命周期會在controller消亡的時候結(jié)束，其中的數(shù)據(jù)也會銷毀，因此我們常常會將獲取數(shù)據(jù)的操作放在自定義的服務(wù)中。因此我們的實例如下
angular.module("app", [])
.controller("demoController", function(data) {
data.getData().then(function(resp) {
console.log(resp);
})
})
.factory("data", function($http) {
return {
getData: function() {
var url = "https://hq.tigerbrokers.com/fundamental/finance_calendar/get_day/2016-06-26";
return $http.get(url);
}
}
})
我們將then中回調(diào)函數(shù)的參數(shù)打印出來，發(fā)現(xiàn)格式如下
Object {
config: Object {},
data: Object {},
headers: function(d) {},
status: 200,
statusText: "OK"
}
這一點與jquery的返回值略有不同，他們分別表示的意思為
config： 請求的配置信息
data： 返回的數(shù)據(jù)
headers: 請求的頭部信息
status: 返回的狀態(tài)碼
點擊查看實例地址
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/79824.html
摘要：回調(diào)函數(shù)有兩個參數(shù)，，分別代表執(zhí)行成功與失敗。有兩個回調(diào)函數(shù)，分別表示執(zhí)行成功和執(zhí)行失敗的回調(diào)，回調(diào)函數(shù)的參數(shù)為在第一步邏輯中標(biāo)記方法傳入的字符串。鏈?zhǔn)讲僮魅绻羞壿嫷膱?zhí)行需要時間等待，那么，中回調(diào)函數(shù)的返回值為對象時，才能夠按順序執(zhí)行。 相信有一些開發(fā)經(jīng)驗的朋友就應(yīng)該知道，對于JavaScript而言，promise十分重要，在開發(fā)中總能用到。因此掌握好它是一件必須做的事情。 我之前...
摘要：回調(diào)函數(shù)有兩個參數(shù)，，分別代表執(zhí)行成功與失敗。有兩個回調(diào)函數(shù)，分別表示執(zhí)行成功和執(zhí)行失敗的回調(diào)，回調(diào)函數(shù)的參數(shù)為在第一步邏輯中標(biāo)記方法傳入的字符串。鏈?zhǔn)讲僮魅绻羞壿嫷膱?zhí)行需要時間等待，那么，中回調(diào)函數(shù)的返回值為對象時，才能夠按順序執(zhí)行。 相信有一些開發(fā)經(jīng)驗的朋友就應(yīng)該知道，對于JavaScript而言，promise十分重要，在開發(fā)中總能用到。因此掌握好它是一件必須做的事情。 我之前...
摘要：假設(shè)家具廠在一周后做完了這個衣柜，并如約送到了張先生家包郵哦，親，這就叫做衣柜，也就是已解決。這樣，整個異步流程就圓滿完成，無論成功或者失敗，張先生都沒有往里面投入任何額外的時間成本。 如果想使用 $http 或者其他異步操作, 那 $q 是必須要掌握的概念啦. Lets get started! 如何理解$q, deferred object ? 形象的講解angular中的$q與p...
摘要：規(guī)范中文是提供的一個服務(wù)。實際調(diào)用這個方法最終在此處加入到隊列中定義此處調(diào)用進入此處是鏈?zhǔn)秸{(diào)用傳參關(guān)鍵，實際是上一個的的返回值，所以能知道，如果需要所有的都能取到異步任務(wù)的返回值，就得在的函數(shù)中，將值返回。 promise是什么 這里不解釋promise是什么，因為我相信你來看文章的時候已經(jīng)知道你什么是promise了。此處有promise規(guī)范。 Promise/A+規(guī)范 中文Prom...
閱讀 2969·2021-11-25 09:43
閱讀 3586·2021-11-24 11:13
閱讀 3354·2021-10-14 09:42
閱讀 2556·2021-09-23 11:53
閱讀 3605·2021-09-22 15:57
閱讀 3221·2021-09-02 09:54
閱讀 3499·2019-08-30 13:47
閱讀 1638·2019-08-29 16:55
