Javascript基礎之-Promise

Promise是什麼呢?根據ecma-262的定義:

Promise是一個被用於延時計算的最終結果的佔位符

(A Promise is an object that is used as a placeholder for the eventual results of a deferred (and possibly asynchronous) computation.)

這個怎麼理解呢

比如說,我要去麥當勞買點吃的,下單以後人家會先給你一個訂單號,等人家外賣做好了,會提示你,並用那個訂單小票來換取你真正的食物,在這時候,那個訂單小票就是你這頓飯的佔位符。

回到Promise,它有三種狀態,分別爲完成,拒絕和待決議,

而待決議的狀態代表它還沒有被完成或者是拒絕,也就是說,如果它一直都是處於待決議的狀態,意味着代碼永遠都不會繼續往下執行

所以下面這段代碼永遠都執行不到finish

new Promise((resolve, reject) => {
  console.log('waiting');
  document.writeln('waiting');
}).then((msg) => {
  console.log('finish');
});

也就是意味着,必須顯示的執行resolve()或者是reject,程序纔會繼續往下執行。

那怎麼解決這個問題呢,其實很簡單,決議一下就好了嘛,哈哈~~

或者給Promise設置一個超時時間,看下面的代碼:

function timeoutPromise(delay) {
  return new Promise( function(resolve,reject){
    setTimeout( function(){
      reject( "Timeout!" );
    }, delay );
  } );
}
Promise.race([
  new Promise(() => {
    console.log('waiting...');
  }),
  timeoutPromise(3000)
]).catch((msg) => {
  console.log(msg);
})

這段代碼呢,會先等待5秒,然後會打印出一個錯誤"Timeout",在這裏,Promise.race()實際上就是競態的,誰先決議,其餘的就會被拋棄。所以咱們三秒鐘後決議一個拒絕,剩下那個promise自動被拋棄了

說到錯誤處理了,思考下面的代碼:

new Promise((resolve, reject) => {
  foo.bar();
}).then((msg) => {
  console.log(msg);
}, null).then((msg) => {
  console.log(msg);
}, (err) => {
  console.log(err);
});

這段代碼,很明顯foo不是對象,所以會報ReferenceError,所以呢,會自動決議爲reject,然後他緊接着的那個then沒有拒絕處理回調,然後接着往下傳遞錯誤,直到有reject回調爲止,假如一直都沒有reject回調呢,他就會在全局拋出一個未捕獲的異常。

那麼如果在Promise決議多次呢,實際上只有第一次決議生效,也就是說,只能有一種決議生效,又成功又失敗,或者成功多次,失敗多次聽着就不靠譜是吧,思考下面的代碼

new Promise((resolve, reject) => {
  resolve();
  reject();
  console.log('exec finish');
}).then((msg) => {
  console.log('resolve');
}, (err) => {
  console.log('reject');
});

運行結果是輸出exec finish 和resolve,因爲第一次決議爲resolve, 所以reject決議就被拋棄了

大家想一下,決議後對應的then裏面的回調函數是同步還是異步的呢,思考下面這個問題:

console.log(0);
let p = new Promise((resolve, reject) => {
  console.log(1);
  resolve();
  console.log(2);
})
console.log(3);
p.then((msg) => {
  console.log(4);
});
console.log(5);

他的結果是 1 2 3 5 4

答案很顯然啦,是異步的!實際上當決議以後,就會把它放到一個異步隊列裏調用

那爲什麼要這麼設計呢,會給我們帶來什麼好處呢,思考下面這個問題

function getResult() {
  console.log(a);
}
function opt() {
  if (isAsync) {
    setTimeout(() => {
      getResult();
    }, 0);
  } else {
    getResult();
  }
}
var a = 0;
var isAsync = false;
opt();
a++;
isAsync = true;
opt();
a++;

他的結果輸出的是0 2,那爲什麼不是0, 1,實際上就是因爲由於同步和異步的的不確定性導致的,也叫zalgo,所以呢,要想消除他們的不確定性,必須就讓他裏面的代碼要麼都是同步,要麼都是異步,這也是then爲什麼是異步的原因了

關於then,還有一個問題,就是then的返回值是什麼,來繼續看問題

var p = Promise.resolve( 21 );
var p2 = p.then( function(v){
  return v * 2;
});
console.log(p2);

通過他的結果,你很容易就能看出來,then的返回值是一個Promise,那麼,這個then回調是不是可以這麼理解呢?

function callback() {
  return Promise.resolve(42);
}

如果是的話,那麼咱們就研究一下Promise.resolve()的特性,然後then()同理就可以是吧

那麼我們現在就研究一下Promise.resolve()的一些特性:

如果向Promise.resolve()傳遞一個非Promise,非thenable的立即值,就會立即得到這個值填充的Promise,這個有三個關鍵字,非Promise,非thenable和立即值

如果向Promise.resolve()傳遞一個真正的promise,那麼就會返回這個Promise,又一個例子,很好理解

var p = Promise.resolve(42);
var p2 = Promise.resolve(p);
console.log(p === p2);   // true

如果向Promise.resolve()傳遞一個非Promise的thenable值,那麼就會展開這個值,並且在展開過程會持續到提取出一個具體的Promise最終值

大家應該會有一點疑惑,thenable是什麼,這段話是什麼意思

var obj = {
  then(resolve, reject) {
    resolve(42);
  }
};
Promise.resolve(obj).then((msg) => {
  console.log(msg);  //42
});

好了,Promise.resolve()特性講完了,then返回值同理

同理完了以後呢,就會出現一些比較有意思的用法

首先就是鏈式調用,比如說

var p = Promise.resolve( 21 );
var p2 = p.then( function(v){
  console.log( v ); // 21
  // 用值42填充p2
  return v * 2;
} );
// 連接p2
p2.then( function(v){
  console.log( v ); // 42
} );

很簡單吧,就不贅述了。

還有一個比較有意思,就是Promise實現同步執行,也就是前一個then如果是異步的話,它必須操作完成後,纔會執行後面的then,常見的寫法是這樣的

new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('exec in promise it');
    resolve();
  }, 1000);
}).then(() => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('exec in then it');
      resolve();
    }, 1000);
  });
});

這個先過一秒輸出第一句話,再過一秒輸出第二句話

這個的原理實際上剛剛Promise.resolve()的第二條,如果返回的是Promise,那麼會直接返回這個Promise,在這裏,直接返回return的這個Promise後,就會等待這個Promise決議,在一秒後決議完,就執行後面的then

最後一個有關then的知識點了:

一個Promise決議後,這個Promise上所有的通過then()註冊的回調都會在下一個異步時間節點上依次被立即調用,這些回掉中任意一個都無法影響或者延誤對其他回調的調用

var p = new Promise((resolve, reject) => {
  resolve();
});
p.then( function(){
  p.then( function(){
    console.log( "C" );
  } );
  console.log( "A" );
} );
p.then( function(){
  console.log( "B" );
} );
// a b c

這個的重點實際上是這些決議回調都被加入到了一個隊列中,輸出的順序正好實際上就代表了他們加入隊列後的先後順序

參考書籍《你不知道的Javascript中卷》
本文轉載自http://www.lht.ren/article/3/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章