本文實(shí)例講述了ES6 Promise對(duì)象的含義和基本用法。分享給大家供大家參考，具體如下：

1.Promise的含義

Promise是異步編程的一種解決方案，比傳統(tǒng)的解決方案（回調(diào)函數(shù)和事件）更合理更強(qiáng)大。

所謂Promise，簡(jiǎn)單說(shuō)就是一個(gè)容器，里面保存著某個(gè)未來(lái)才會(huì)結(jié)束的事件 (通常是一個(gè)異步操作)的結(jié)果。從語(yǔ)法上說(shuō)，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)，任何其他操作都無(wú)法改變這個(gè)狀態(tài)。這也是Promise這個(gè)名字的由來(lái)，它的英語(yǔ)意思就是“承諾”，表示其他手段無(wú)法改變。

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ò)過(guò)了它，再去監(jiān)聽(tīng)，是得不到結(jié)果的。

有了Promise對(duì)象，就可以把異步操作以同步操作的流程表達(dá)出來(lái)，避免了層層嵌套的回調(diào)函數(shù)。此外，Promise對(duì)象提供了統(tǒng)一的接口，使得控制異步操作更加容易。

2.基本用法

ES6規(guī)定，Promise對(duì)象是一個(gè)構(gòu)造函數(shù)，用來(lái)生成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é)果。過(guò)了指定的時(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í)行，所以首先輸出的是”P(pán)romise”，然后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(mén)教程》、《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ì)有所幫助。

最新評(píng)論