iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
自我挑戰組

轉職軟體工程師的543系列 第 28

【Day 28】JavaScript Promise

  • 分享至 

  • xImage
  •  

Promise 是甚麼?

Promise 是 ES6 引入的標準之一。 Promise 字面上的意思為「承諾」,表示非同步操作在未來終將實現(或產生錯誤),並同時取得該操作的結果值。
利用這種異步的執行機制,可以來規避函數的Callback Hell(回調地獄)。

何謂Callback Hell(回調地獄)? 連續執行兩個或者多個異步操作是一個常見的需求,在上一個操作執行成功之後,開始下一個的操作,並帶著上一步操作所返回的結果。在過去,要想做多重的異步操作,回調嵌套後,層層嵌套的代碼的維護難度,和無法排除bug,這就會導致經典的回調地獄。

首先先創建promise物件
const promise = new Promise( /* executor */ function(resolve, reject) { ... } );

Promise的建構式接受一個執行函式(executor),用來定義非同步行為。執行函式會被馬上呼叫並傳入兩個參數:(resolve, reject)。resolve 與 reject 函式,會在被個別呼叫時,個別執行之。通常 executor 函式會發起一些非同步操作。接著,成功完成後執行 resolve 以完成 promise;或如果有錯誤,執行 rejects。

一個 Promise 物件處於以下幾種狀態:
擱置(pending) :初始狀態。
實現(fulfilled):表示操作成功。
拒絕(rejected) :表示操作失敗。

之後再透過Promise.prototype.then() 或 Promise.prototype.catch() 方法回傳 promise

let myPromise = new Promise(function( resolve , reject) {
  let js = 0;    
  if (js == 0) {
    console.log('OK');
    resolve();
  } else {
    console.log('Error');
    reject();
  }
});

myPromise
  .then(function() {console.log('resolve');
}).catch(function(){console.log('reject');
})

改為從promise返回值,不用return,須調用 resolve 和 reject ,這樣就可以使用返回值做進一步處理

let myPromise = new Promise(function( resolve , reject) {
  let js = 1;    
  if (js == 0) {
    resolve('OK');
  } else {
    reject('Error');
  }
});

myPromise
  .then(function(msg) {console.log(`${msg}-resolve`);
}).catch(function(msg){console.log(`${msg}-reject`);
})

上一篇
【Day 27】JavaScript 回呼函式(callback function)
下一篇
【Day 29】JavaScript fetch
系列文
轉職軟體工程師的54330
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言