摘要:對于這些事件,實際您并不關(guān)注在添加偵聽器之前所發(fā)生的事情。如果圖像元素有一個返回的方法,我們可以執(zhí)行兩個特點有點類似于事件偵聽器,但有以下兩點區(qū)別只能成功或失敗一次,而不能成功或失敗兩次,也不能從成功轉(zhuǎn)為失敗或從失敗轉(zhuǎn)為成功。
Promise promise 所執(zhí)行的任務(wù)
事件對于同一對象上發(fā)生多次的事情(如 keyup、touchstart 等)非常有用。對于這些事件,實際您并不關(guān)注在添加偵聽器之前所發(fā)生的事情。但是,如果關(guān)系到異步成功/失敗,理想的情況是您希望:
</>復(fù)制代碼
img1.callThisIfLoadedOrWhenLoaded(function() {
// loaded
}).orIfFailedCallThis(function() {
// failed
});
// and…
whenAllTheseHaveLoaded([img1, img2]).callThis(function() {
// all loaded
}).orIfSomeFailedCallThis(function() {
// one or more failed
});
這就是 promise 所執(zhí)行的任務(wù)。
如果 HTML 圖像元素有一個返回 promise 的“ready”方法,我們可以執(zhí)行:
</>復(fù)制代碼
img1.ready().then(function() {
// loaded
}, function() {
// failed
});
// and…
Promise.all([img1.ready(), img2.ready()]).then(function() {
// all loaded
}, function() {
// one or more failed
});
Promise兩個特點
Promise 有點類似于事件偵聽器,但有以下兩點區(qū)別:
</>復(fù)制代碼
1. promise 只能成功或失敗一次,而不能成功或失敗兩次,也不能從成功轉(zhuǎn)為失敗或從失敗轉(zhuǎn)為成功。
2. 如果 promise 已成功或失敗,且您之后添加了成功/失敗回調(diào),則將會調(diào)用正確的回調(diào),即使事件發(fā)生在先。
Promise狀態(tài)
</>復(fù)制代碼
1. A promise is fulfilled if promise.then(f) will call f "as soon as possible."
2. A promise is rejected if promise.then(undefined, r) will call r "as soon as possible."
3. A promise is pending if it is neither fulfilled nor rejected.
創(chuàng)建 promise 的步驟
</>復(fù)制代碼
var promise = new Promise(function(resolve, reject) {
// do a thing, possibly async, then…
if (/* everything turned out fine */) {
resolve("Stuff worked!");
}
else {
reject(Error("It broke"));
}
});
Promise 構(gòu)造函數(shù)包含一個參數(shù)和一個帶有 resolve(解析)和 reject(拒絕)兩個參數(shù)的回調(diào)。在回調(diào)中執(zhí)行一些操作(例如異步),如果一切都正常,則調(diào)用 resolve,否則調(diào)用 reject.
Promise 的使用示例</>復(fù)制代碼
promise.then(function(result) {
console.log(result); // "Stuff worked!"
}, function(err) {
console.log(err); // Error: "It broke"
});
then() 包含兩個參數(shù):一個用于成功情形的回調(diào)和一個用于失敗情形的回調(diào)。這兩個都是可選的,因此您可以只添加一個用于成功情形或失敗情形的回調(diào)。
實例啟動一個轉(zhuǎn)環(huán)來提示加載
獲取一個故事的 JSON,確定每個章節(jié)的標(biāo)題和網(wǎng)址
向頁面中添加標(biāo)題
獲取每個章節(jié)
向頁面中添加故事
停止轉(zhuǎn)環(huán)
但如果此過程發(fā)生錯誤,也要向用戶顯示。我們也想在那一點停止轉(zhuǎn)環(huán),否則,它將不停地旋轉(zhuǎn)、眩暈并撞上其他 UI 控件。
從網(wǎng)絡(luò)中獲取數(shù)據(jù):
</>復(fù)制代碼
對 XMLHttpRequest 執(zhí)行 promise
編寫一個作出 GET 請求的簡單函數(shù)
</>復(fù)制代碼
function get(url) {
// Return a new promise.
return new Promise(function(resolve, reject) {
// Do the usual XHR stuff
var req = new XMLHttpRequest();
req.open("GET", url);
req.onload = function() {
// This is called even on 404 etc
// so check the status
if (req.status == 200) {
// Resolve the promise with the response text
resolve(req.response);
}
else {
// Otherwise reject with the status text
// which will hopefully be a meaningful error
reject(Error(req.statusText));
}
};
// Handle network errors
req.onerror = function() {
reject(Error("Network Error"));
};
// Make the request
req.send();
});
}
使用該功能
</>復(fù)制代碼
get("story.json").then(function(response) {
console.log("Success!", response);
}, function(error) {
console.error("Failed!", error);
})
現(xiàn)在我們無需手動鍵入 XMLHttpRequest 即可作出 HTTP 請求。
返回新值會改變值
</>復(fù)制代碼
var promise = new Promise(function(resolve, reject) {
resolve(1);
});
promise.then(function(val) {
console.log(val); // 1
return val + 2;
}).then(function(val) {
console.log(val); // 3
})
異步操作隊列
可以鏈接多個 then,以便按順序運行異步操作。
當(dāng)從 then() 回調(diào)中返回某些內(nèi)容時,這有點兒神奇。如果返回一個值,則會以該值調(diào)用下一個 then()。但是,如果您返回類似于 promise 的內(nèi)容,下一個 then() 則會等待,并僅在 promise 產(chǎn)生結(jié)果(成功/失敗)時調(diào)用。例如:
</>復(fù)制代碼
getJSON("story.json").then(function(story) {
return getJSON(story.chapterUrls[0]);
}).then(function(chapter1) {
console.log("Got chapter 1!", chapter1);
})
http://caibaojian.com/promise...
https://github.com/googlesamp...
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/108337.html
摘要:最受歡迎的引擎是,在和中使用,用于,以及所使用的。怎么處理每個引擎都有一個基本組件,稱為調(diào)用棧。也就是說,如果有其他函數(shù)等待執(zhí)行,函數(shù)是不能離開調(diào)用棧的。每個異步函數(shù)在被送入調(diào)用棧之前必須通過回調(diào)隊列。例如方法是在中傳遞的回調(diào)函數(shù)。 ? 翻譯:瘋狂的技術(shù)宅 原文:www.valentinog.com/blog/engine… 從Call Stack,Global Me...
摘要:從最開始的到封裝后的都在試圖解決異步編程過程中的問題。為了讓編程更美好,我們就需要引入來降低異步編程的復(fù)雜性。寫一個符合規(guī)范并可配合使用的寫一個符合規(guī)范并可配合使用的理解的工作原理采用回調(diào)函數(shù)來處理異步編程。 JavaScript怎么使用循環(huán)代替(異步)遞歸 問題描述 在開發(fā)過程中,遇到一個需求:在系統(tǒng)初始化時通過http獲取一個第三方服務(wù)器端的列表,第三方服務(wù)器提供了一個接口,可通過...
摘要:最受歡迎的引擎是,在和中使用,用于,以及所使用的。單線程的我們說是單線程的,因為有一個調(diào)用棧處理我們的函數(shù)。也就是說,如果有其他函數(shù)等待執(zhí)行,函數(shù)是不能離開調(diào)用棧的。每個異步函數(shù)在被送入調(diào)用棧之前必須通過回調(diào)隊列。 翻譯:瘋狂的技術(shù)宅原文:https://www.valentinog.com/bl... 本文首發(fā)微信公眾號:前端先鋒歡迎關(guān)注,每天都給你推送新鮮的前端技術(shù)文章 sh...
摘要:的翻譯文檔由的維護很多人說,阮老師已經(jīng)有一本關(guān)于的書了入門,覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發(fā)過程中,顯得越來越重要。為了讓編程更美好,我們就需要引入來降低異步編程的復(fù)雜性。 JavaScript Promise 迷你書(中文版) 超詳細介紹promise的gitbook,看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...
摘要:為這些回調(diào)函數(shù)分別命名并分離存放可以在形式上減少嵌套,使代碼清晰,但仍然不能解決問題。如果在一個結(jié)束成功或失敗,同前面的說明后,添加針對成功或失敗的回調(diào),則回調(diào)函數(shù)會立即執(zhí)行。 異步? 我在很多地方都看到過異步(Asynchronous)這個詞,但在我還不是很理解這個概念的時候,卻發(fā)現(xiàn)自己常常會被當(dāng)做已經(jīng)很清楚(* ̄? ̄)。 如果你也有類似的情況,沒關(guān)系,搜索一下這個詞,就可以得到大致...
摘要:的執(zhí)行與狀態(tài)無關(guān)當(dāng)?shù)玫綘顟B(tài)不論成功或失敗后就會執(zhí)行,原文鏈接參考鏈接對象 同期異步系列文章推薦談一談javascript異步j(luò)avascript異步中的回調(diào)javascript異步與promisejavascript異步之Promise.resolve()、Promise.reject()javascript異步之Promise then和catchjavascript異步之a(chǎn)sync...
閱讀 1124·2021-09-22 16:04
閱讀 1505·2019-08-30 15:43
閱讀 1111·2019-08-29 14:01
閱讀 3447·2019-08-26 12:19
閱讀 3364·2019-08-26 12:15
閱讀 1454·2019-08-26 12:13
閱讀 3273·2019-08-23 17:00
閱讀 1492·2019-08-23 15:38