ES6 Promise對(duì)象的含義和基本用法分析
本文實(shí)例講述了ES6 Promise對(duì)象的含義和基本用法。分享給大家供大家參考,具體如下:
1.Promise的含義
Promise是異步編程的一種解決方案,比傳統(tǒng)的解決方案(回調(diào)函數(shù)和事件)更合理更強(qiáng)大。
所謂Promise,簡(jiǎn)單說就是一個(gè)容器,里面保存著某個(gè)未來才會(huì)結(jié)束的事件 (通常是一個(gè)異步操作)的結(jié)果。從語法上說,Promise是一個(gè)對(duì)象,從它可以獲取異步操作的消息。
Promise對(duì)象有以下2個(gè)特點(diǎn):
1.對(duì)象的狀態(tài)不受外界影響。Promise對(duì)象代表一個(gè)異步操作,有三種狀態(tài):Pending(進(jìn)行中)、Resolved(已完成)和Rejected(已失敗)。只有異步操作的結(jié)果,可以決定當(dāng)前是哪一種狀態(tài),任何其他操作都無法改變這個(gè)狀態(tài)。這也是Promise這個(gè)名字的由來,它的英語意思就是“承諾”,表示其他手段無法改變。
2.一旦狀態(tài)改變,就不會(huì)再變,任何時(shí)候都可以得到這個(gè)結(jié)果。Promise對(duì)象的狀態(tài)改變,只有兩種可能:從Pending變?yōu)?span style="color: #0000ff">Resolved;從Pending變?yōu)?span style="color: #0000ff">Rejected。只要這兩種情況發(fā)生,狀態(tài)就凝固了,不會(huì)再變了,會(huì)一直保持這個(gè)結(jié)果。就算改變已經(jīng)發(fā)生了,你再對(duì)Promise對(duì)象田靜回調(diào)函數(shù),也會(huì)立即得到這個(gè)結(jié)果。這與事件(Event)完全不同,事件的特點(diǎn)是,如果你錯(cuò)過了它,再去監(jiān)聽,是得不到結(jié)果的。
有了Promise對(duì)象,就可以把異步操作以同步操作的流程表達(dá)出來,避免了層層嵌套的回調(diào)函數(shù)。此外,Promise對(duì)象提供了統(tǒng)一的接口,使得控制異步操作更加容易。
2.基本用法
ES6規(guī)定,Promise對(duì)象是一個(gè)構(gòu)造函數(shù),用來生成Promise實(shí)例
var promise = new Promise(function(resolve,reject){
// ... some code
if(/* 異步操作成功 */){
resolve(value);
}else{
reject(error);
}
});
Promise構(gòu)造函數(shù)接受一個(gè)函數(shù)作為參數(shù),該函數(shù)的兩個(gè)參數(shù)分別是resolve和reject。它們是兩個(gè)函數(shù),又JavaScript引擎提供,不是自己部署。
resolve函數(shù)的作用,將Promise對(duì)象的狀態(tài)從“未完成”變成“成功”(即從Pending變?yōu)?span style="color: #0000ff">Resolved),在異步操作成功時(shí)調(diào)用,并將異步操作的結(jié)果,作為參數(shù)傳遞出去;
reject函數(shù)的作用是,在異步操作失敗時(shí)調(diào)用,并將異步操作報(bào)出的錯(cuò)誤,作為參數(shù)傳遞出去。
Promise實(shí)例生成以后,可以用then方法分別制定Resolved狀態(tài)和Rejected狀態(tài)的回調(diào)函數(shù):
promise.then(function(value){
// sucess
},function(error){
// failure
});
then方法可以接受2個(gè)回調(diào)函數(shù)作為參數(shù),第二個(gè)函數(shù)是可選的,不一定要提供。這兩個(gè)函數(shù)都接受Promise對(duì)象傳出的值作為參數(shù)。
下面是一個(gè)Promise對(duì)象的簡(jiǎn)單例子:
function timeout(ms){
return new Promise((resolve,reject)=>{
setTimeout(resolve,ms,'done');
});
}
timeout(100).then((value)=>{
console.log(value);
});
上面代碼中,timeout方法返回一個(gè)Promise實(shí)例,表示一段事件以后才會(huì)發(fā)生的結(jié)果。過了指定的時(shí)間(ms參數(shù))以后,Promise實(shí)例的狀態(tài)變?yōu)?code>Resolved,就會(huì)觸發(fā)then方法綁定的回調(diào)函數(shù)。
Promise新建后就會(huì)立即執(zhí)行
let promise = new Promise(function(resolve,rejeact){
console.log('Promise');
resolve();
});
promise.then(function(){
console.log('Resolved');
});
console.log('Hi');
// Promise
// Hi
// Resolved
上面代碼中,Promise新建后立即執(zhí)行,所以首先輸出的是”Promise”,然后then方法指定的回調(diào)函數(shù),將在當(dāng)前腳本所有同步任務(wù)執(zhí)行完才會(huì)執(zhí)行,所以”Resolved”最后輸出。
下面是異步加載圖片的例子:
function loadImageAsync(url){
return new Promise(function(resolve,reject){
var image = new Image();
image.onload = function(){
resolve(image);
};
image.onerror = function(){
reject(new Error('Could not load image at' + url));
};
image.src = url;
});
}
下面是一個(gè)用Promise對(duì)象實(shí)現(xiàn)Ajax操作的例子:
var getJSON = function(url){
var promise = new Promise(function(resolve,reject){
var client = new XMLHttpRequest();
client.open('GET',url);
client.onreadystatechange = handler;
client.responseType = 'json';
client.setRequestHeader('Accept','application/json');
client.send();
function handler(){
if(this.readyState !== 4){
return;
}
if(this.status === 200){
resolve(this.response);
}else{
reject(new Error(this.statusText));
}
}
});
return promise;
};
//
getJSON('/posts.jons').then(function(json){
consoloe.log(json);
},function(error){
console.log('出錯(cuò)了');
});
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
每天一篇javascript學(xué)習(xí)小結(jié)(RegExp對(duì)象)
這篇文章主要介紹了javascript中的RegExp對(duì)象知識(shí)點(diǎn),對(duì)RegExp對(duì)象的基本使用方法,以及各種方法進(jìn)行整理,感興趣的小伙伴們可以參考一下2015-11-11
對(duì)layui中的onevent 和event的使用詳解
今天小編就為大家分享一篇對(duì)layui中的onevent 和event的使用詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
SVG動(dòng)畫vivus.js庫使用小結(jié)(實(shí)例代碼)
本文通過代碼給大家介紹SVG動(dòng)畫vivus.js庫使用小結(jié),代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-09-09
js實(shí)現(xiàn)倒計(jì)時(shí)關(guān)鍵代碼
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)倒計(jì)時(shí)的關(guān)鍵代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05
Firefox中通過JavaScript復(fù)制數(shù)據(jù)到剪貼板(Copy to Clipboard 跨瀏覽器版)
這篇文章主要介紹了irefox中通過JavaScript復(fù)制數(shù)據(jù)到剪貼板的方法,可以跨瀏覽器使用,大家可以使用看看2013-11-11
js控制iframe的高度/寬度讓其自適應(yīng)內(nèi)容
這篇文章主要介紹了如何使用js控制iframe的高度/寬度讓其自適應(yīng)內(nèi)容,需要的朋友可以參考下2014-04-04
javascript比較兩個(gè)日期相差天數(shù)的方法
這篇文章主要介紹了javascript比較兩個(gè)日期相差天數(shù)的方法,涉及javascript針對(duì)日期的轉(zhuǎn)換與數(shù)學(xué)運(yùn)算相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-07-07

