ES6 Promise對象的含義和基本用法分析
本文實例講述了ES6 Promise對象的含義和基本用法。分享給大家供大家參考,具體如下:
1.Promise的含義
Promise是異步編程的一種解決方案,比傳統(tǒng)的解決方案(回調(diào)函數(shù)和事件)更合理更強大。
所謂Promise
,簡單說就是一個容器,里面保存著某個未來才會結(jié)束的事件 (通常是一個異步操作)的結(jié)果。從語法上說,Promise是一個對象,從它可以獲取異步操作的消息。
Promise
對象有以下2個特點:
1.對象的狀態(tài)不受外界影響。Promise對象代表一個異步操作,有三種狀態(tài):Pending(進(jìn)行中)、Resolved(已完成)和Rejected(已失敗)。只有異步操作的結(jié)果,可以決定當(dāng)前是哪一種狀態(tài),任何其他操作都無法改變這個狀態(tài)。這也是Promise這個名字的由來,它的英語意思就是“承諾”,表示其他手段無法改變。
2.一旦狀態(tài)改變,就不會再變,任何時候都可以得到這個結(jié)果。Promise
對象的狀態(tài)改變,只有兩種可能:從Pending變?yōu)?span style="color: #0000ff">Resolved;從Pending變?yōu)?span style="color: #0000ff">Rejected。只要這兩種情況發(fā)生,狀態(tài)就凝固了,不會再變了,會一直保持這個結(jié)果。就算改變已經(jīng)發(fā)生了,你再對Promise
對象田靜回調(diào)函數(shù),也會立即得到這個結(jié)果。這與事件(Event)完全不同,事件的特點是,如果你錯過了它,再去監(jiān)聽,是得不到結(jié)果的。
有了Promise對象,就可以把異步操作以同步操作的流程表達(dá)出來,避免了層層嵌套的回調(diào)函數(shù)。此外,Promise
對象提供了統(tǒng)一的接口,使得控制異步操作更加容易。
2.基本用法
ES6規(guī)定,Promise對象是一個構(gòu)造函數(shù),用來生成Promise實例
var promise = new Promise(function(resolve,reject){ // ... some code if(/* 異步操作成功 */){ resolve(value); }else{ reject(error); } });
Promise
構(gòu)造函數(shù)接受一個函數(shù)作為參數(shù),該函數(shù)的兩個參數(shù)分別是resolve和reject。它們是兩個函數(shù),又JavaScript引擎提供,不是自己部署。
resolve
函數(shù)的作用,將Promise對象的狀態(tài)從“未完成”變成“成功”(即從Pending變?yōu)?span style="color: #0000ff">Resolved),在異步操作成功時調(diào)用,并將異步操作的結(jié)果,作為參數(shù)傳遞出去;
reject
函數(shù)的作用是,在異步操作失敗時調(diào)用,并將異步操作報出的錯誤,作為參數(shù)傳遞出去。
Promise
實例生成以后,可以用then
方法分別制定Resolved
狀態(tài)和Rejected
狀態(tài)的回調(diào)函數(shù):
promise.then(function(value){ // sucess },function(error){ // failure });
then
方法可以接受2個回調(diào)函數(shù)作為參數(shù),第二個函數(shù)是可選的,不一定要提供。這兩個函數(shù)都接受Promise
對象傳出的值作為參數(shù)。
下面是一個Promise
對象的簡單例子:
function timeout(ms){ return new Promise((resolve,reject)=>{ setTimeout(resolve,ms,'done'); }); } timeout(100).then((value)=>{ console.log(value); });
上面代碼中,timeout
方法返回一個Promise實例,表示一段事件以后才會發(fā)生的結(jié)果。過了指定的時間(ms參數(shù))以后,Promise
實例的狀態(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; }); }
下面是一個用Promise
對象實現(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('出錯了'); });
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
Javascript獲取與設(shè)置ckeditor數(shù)據(jù)的實現(xiàn)方法
最近編輯器后臺升級成了ckeditor,但原來后臺有很多對應(yīng)編輯器內(nèi)容的替換功能,那么就需要用js獲取ckeditor編輯器里面的內(nèi)容,這里就為大家介紹一下具體的實現(xiàn)方法2023-08-08JavaScript設(shè)計模式之責(zé)任鏈模式實例分析
這篇文章主要介紹了JavaScript設(shè)計模式之責(zé)任鏈模式,結(jié)合實例形式分析了責(zé)任鏈模式的概念、原理及具體定義與使用技巧,需要的朋友可以參考下2019-01-01基于JavaScript實現(xiàn)線性漸變的高斯模糊效果
這篇文章主要為大家詳細(xì)介紹了高斯模糊算法以及線性漸變的高斯模糊算法的原理,并通過一個小demo展示了如何實現(xiàn)y方向上線性漸變的高斯模糊效果,需要的可以了解下2024-01-01