今天就跟大家聊聊有關(guān)ES6中Promise對象的作用是什么,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
永年網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),永年網(wǎng)站設(shè)計(jì)制作,有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為永年1000多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢,請找那個(gè)售后服務(wù)好的永年做網(wǎng)站的公司定做!
1.Promise的含義
Promise是異步編程的一種解決方案,比傳統(tǒng)的解決方案(回調(diào)函數(shù)和事件)更合理更強(qiáng)大。
所謂Promise
,簡單說就是一個(gè)容器,里面保存著某個(gè)未來才會結(jié)束的事件 (通常是一個(gè)異步操作)的結(jié)果。從語法上說,Promise是一個(gè)對象,從它可以獲取異步操作的消息。
Promise
對象有以下2個(gè)特點(diǎn):
1.對象的狀態(tài)不受外界影響。Promise對象代表一個(gè)異步操作,有三種狀態(tài):Pending(進(jìn)行中)、Resolved(已完成)和Rejected(已失敗)。只有異步操作的結(jié)果,可以決定當(dāng)前是哪一種狀態(tài),任何其他操作都無法改變這個(gè)狀態(tài)。這也是Promise這個(gè)名字的由來,它的英語意思就是“承諾”,表示其他手段無法改變。
2.一旦狀態(tài)改變,就不會再變,任何時(shí)候都可以得到這個(gè)結(jié)果。Promise
對象的狀態(tài)改變,只有兩種可能:從Pending變?yōu)镽esolved;從Pending變?yōu)镽ejected。只要這兩種情況發(fā)生,狀態(tài)就凝固了,不會再變了,會一直保持這個(gè)結(jié)果。就算改變已經(jīng)發(fā)生了,你再對Promise
對象田靜回調(diào)函數(shù),也會立即得到這個(gè)結(jié)果。這與事件(Event)完全不同,事件的特點(diǎn)是,如果你錯(cuò)過了它,再去監(jiān)聽,是得不到結(jié)果的。
有了Promise對象,就可以把異步操作以同步操作的流程表達(dá)出來,避免了層層嵌套的回調(diào)函數(shù)。此外,Promise
對象提供了統(tǒng)一的接口,使得控制異步操作更加容易。
2.基本用法
ES6規(guī)定,Promise對象是一個(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對象的狀態(tài)從“未完成”變成“成功”(即從Pending變?yōu)镽esolved),在異步操作成功時(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
對象傳出的值作為參數(shù)。
下面是一個(gè)Promise
對象的簡單例子:
function timeout(ms){ return new Promise((resolve,reject)=>{ setTimeout(resolve,ms,'done'); }); } timeout(100).then((value)=>{ console.log(value); });
上面代碼中,timeout
方法返回一個(gè)Promise實(shí)例,表示一段事件以后才會發(fā)生的結(jié)果。過了指定的時(shí)間(ms參數(shù))以后,Promise
實(shí)例的狀態(tài)變?yōu)?code>Resolved,就會觸發(fā)then
方法綁定的回調(diào)函數(shù)。
Promise
新建后就會立即執(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í)行完才會執(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
對象實(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ò)了'); });
看完上述內(nèi)容,你們對ES6中Promise對象的作用是什么有進(jìn)一步的了解嗎?如果還想了解更多知識或者相關(guān)內(nèi)容,請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝大家的支持。