Javascript初學筆記 36 Promise學習紀錄(1)

今天要記錄的是ES6推出的promise，是一種處理同步/非同步物件的解決方式。
後來我發現我並不是初次接觸promise的概念，目前我學到的API請求方式axios就包含了promise的概念應用。那究竟什麼是promise?看一下語法跟基本範例之後應該會多少有一些概念。

基本語法

let a = new Promise(function(resolve, reject) { 
// some codes here
if (達成承諾)
   resolve()//呼叫resolve callback   
if (未達成承諾)
   reject()//呼叫reject callback 

上方我們建立了一個名為a的Promise物件，裡面處理了兩個callback函式
實現(fullfilled):當承諾被兌現時要做的動作，照慣例命名為resolve
拒絕(reject):當承諾被拒絕時要做的動作，照慣例命名為reject。
接著我們來看一下一個實例做說明。以常見的小朋友吵媽媽要新東西為例

//宣告一個變數表示你媽是否真的履行承諾
let mommys_promise = false
let mommy = new Promise((resolve,reject)=>{
  mommys_promise = true
  mommys_promise?setTimeout(()=>resolve(),3000):reject()
}) 

 mommy
.then(()=>{console.log('she keeps her promises'))
.catch(()=>console.log('she does not keep her promises'))
console.log('Mom makes a Promise') 

輸出結果

Mom makes a Promise 
//3 secs later
she keeps her promises

上方的例子中我們看見了之前使用過的then&catch method
可以直接理解為若成功則執行then，反之執行catch
但光看這樣例子會有些難以理解resolve&then的關係，我們改寫一下式子

let mommys_promise = false
 let mommy = new Promise((resolve,reject)=>{
   mommys_promise = true
   mommys_promise?setTimeout(()=>resolve('She does keep the promise'),3000):reject()
 })
 mommy
 .then((response)=>{console.log(response)})
 .catch(()=>console.log('she does not keep her promises'))
 console.log('Mom makes a Promise')

輸出結果

Mom makes a Promise 
//3 secs later
she does keep the promise 

這樣就可以清楚的看出整個前因後果，做個簡單的總結
首先我們建立一個promise物件 mommy
該物件接收兩個callback function，分別是resolve & reject，代表履行承諾後你要做的事情以及被拒絕時你要做的事情。
接著就到了使用該物件的時候，藉由.then method去執行resolve的回傳結果，反之則執行reject的回傳結果，也就是說then 其實具有鍵接的概念在，滿足一環之後會將結果作為參數回傳到下一個then去做使用，真的應用起來會比想像中複雜許多。

本篇文章只做了基本的概念介紹，還沒有探討到實際的運用以及為什麼我們需要promise等議題，由於目前概念仍比較模糊，文章的說明也挺雜亂的，日後再回頭看應該會很難受XD