關於 Promise 的喚起順序

前言

  這次是續上次的 初探 Promise 後再次學習 Promise  ，上次並沒有把 then() 與 catch() 用的比較複雜，事實上是可以做出很複雜的喚起，要做複雜的喚起時，順序就很重要，在此把學習的過程做個紀錄。

內容

  範例如下

function promise(val) {
  return new Promise((resolve, reject) => {
    if (val != 0) 
    	resolve('成功');
    else
    	reject('失敗');
  });
}
//
promise(1)
  .then(success => {
    console.log(success);
    console.log(`then block 0`);
    return promise(1);
  })
  .then(success => {
    console.log(success);
    console.log(`then block 1`);
    return promise(0);
  })
  .catch(fail => {
    console.log(fail);
    console.log(`catch block 0`);
    return promise(1);
  })
  .then(success => {
    console.log(success);
    console.log(`then block 2`);
  })
  .catch(fail => {
    console.log(fail);
    console.log(`catch block 1`);
  })
  .finally(() => {
    console.log(`It's done`);
    console.log(`finally block `);
  });
//
// "成功"
// "then block 0"
// "成功"
// "then block 1"
// "失敗"
// "catch block 0"
// "成功"
// "then block 2"
// "It's done"
// "finally block "

這次的範例是將 初探 Promise 裡的範例做一些改變來組成， promise() 需要輸入一個值來決定成功或失敗， 初探 Promise 的範例把 catch() 放最後可能會讓人誤會 catch() 一定放最後，但 Promise 其實是可以多次 catch() 的，範例在"then block 1"裡蓄意失敗，這個時候會跳到"catch block 0"，"catch block 0" 由於成功，所以跳到"then block 2"，這次範例還多了個 finally() 這個才是一定要放最後的，只要 Promise 執行完就一定會執行，不論是成功或失敗！這次要注意"catch block 0" 的最後要再喚起 promise() ，這樣才能接到"then block 2"或"catch block 1"，"then block 2"或"catch block 1"的最後都不需要再喚起 promise() ，如果有喚起的話，就需要更多的 then() 與 catch() 來承接。

參考資料

[ 卡斯伯的 Blog ] JavaScript Promise 全介紹

[ developer.mozilla.org ] 使用 Promise

相關文章與資料

初探 Promise

 初探 Promise

前言

  最近學習 JavaScript 的 Promise ，在此把學習的過程做個紀錄。

內容

  範例如下

function promise() {
  return new Promise((resolve, reject) => {
    if (Math.random() > 0.5 ) 
    	resolve('成功');
    else
    	reject('失敗');
  });
}
//
promise()
  .then((success) => {
    console.log(success);
  }, (fail) => {
    console.log(fail);
  })
//
promise()
  .then(success => {
    console.log(success);
  })
  .catch(fail => {
    console.log(fail);
  });
//
promise()
  .then(success => {
    console.log(success);
    return promise();
  })
  .then(success => {
    console.log(success);
  })
  .catch(fail => {
    console.log(fail);
  });

先看到範例開頭的 promise()，裡面會用到 Promise() ，這是新標準新增的 Funciton ，也是這次的主角，引數是一個 Funciton ， Function 會有兩個引數，第一個引數是'resolve'，第二個引數是'reject'，這兩個引數的型態都是 Function ，範例在取亂數後如果大於 0.5 ，就喚起 resolve() ，否則就喚起 reject()，就著就是第一次實際使用 promise() ， promise() 可以喚起 then() 來執行 Promise 物件裡的 Function ，也就是有 resolve 與 reject 引數的 Function ，第一個範例會對 then()  傳入成功與失敗對應的 Funciton ， 成功對應 resolve()  ，失敗對應 reject() ，接著第二次實際使用的用法沒有傳入失敗的引述，反倒在 then() 結束後會再執行 catch() ，這個 catch() 會在then() 失敗時被喚起，如果同時傳入失敗的引數又使用 catch() 時，catch() 就不會被執行，最後看到第三個範例，在第一個成功時會再次喚起 promise() 一次，但要注意喚起前要加 return 來喚起，這樣就會變成第一次如果成功就會喚起第二次的 then () ，這裡要注意不論是第一次或第二次的 then() 失敗都會喚起  catch() ，如果無法用語法來理解喚起的原因沒關係，可以把這個用法當作是一種格式，只要記得成功與失敗時哪被執行即可。

參考資料

[ 卡斯伯的 Blog ] JavaScript Promise 全介紹

 解決 Windows 10 開機後卡輸入的問題

前言

  最近筆電開機後會有很長的時間無法從鍵盤輸入任何東西的奇怪現象，在此把解決的過程做個紀錄。

內容

  Windows 10 在剛出時使用起來還滿順的，但經過 Windows Update 的無數次摧殘後，變成每次開機後雖然看的到桌面，但實際打開應用程式就會發現要開很久應用程式才會開啟，但這情形最近越來越嚴重，在 Chrome 已經在開啟的狀態下，鍵盤會長期無法輸入任何東西，但滑鼠卻可以，這情形嚴重時可以高達 30 分鐘，也就是我開機後要等 30 分鐘才能用鍵盤輸入東西，於是我打開工作管理員發現硬碟永遠是佔滿的，但最近發現一個新的佔用硬碟的應用程式，名為"Cryptographic Services"，本以為是中毒了，但查了一下發現他是 Windows 10 自帶的應用程式，而且是用服務的方式來開啟，要關閉的話請如下圖操作

停止"Cryptographic Services"服務，並將啟動類型改成手動

在"服務"的視窗裡找到"Cryptographic Services"，透過右鍵選單停止該服務，並透過右鍵選單裡的內容裡，將啟動類型改成"手動"，改完後狀況好上不少。

  雖說關閉"Cryptographic Services"可以減少開機後被卡鍵盤輸入的時間，但其實不能完全改善，關完後大概會卡 5 分鐘，看工作管理員裡佔用硬碟的還有一個兇手，Windows Update，不過由於我是家用版無法關閉，除非斷網或改用SSD或買專業版，不然看來是無解了，Windows 10 真是個讓人難以喜歡的作業系統。

參考資料

[ docs.microsoft.com ] Windows 10 Cryptographic service high disk usage

 檢查陣列是否有某個元素的 Function

前言

  最近發現 JavaScript 裡的 Array 裡有一個 includes() ，由於之前沒看過，在此把學習的過程做個紀錄。

內容

  查了一下是 ES7(2016) 加入的，主要的功能是檢查陣列是否有某個元素，用法如下

let numAr = [ 0 , 12 , 34 , 56 , 789 ];
console.log( numAr.includes( 12 ) );//true
let strAr = [ 'a' , 'bc' , 'cde' , 'fgh' , 'IJK'];
console.log( strAr.includes( 'cde' ) );//true
let mixAr = [ 1 , 'bc' , 3 , 'fgh' , 5];
console.log( mixAr.includes( 'fgh' ) );//true

範例的第一個例子是檢查數字的陣列，把要檢查的元素輸入 includes() 來檢查，就可以得到結果的布林值，第二個例子檢查的是字串的陣列，用法是一樣的，但我記得 JavaScript 的陣列可以放不同的元素在陣列，所以我實驗了混和了不同元素的陣列，結果是工作正常。 includes() 用起來雖然好用，但無法得知目標元素的索引值，這算是比較可惜的部分。

參考資料

[ developer.mozilla.org ] Array.prototype.includes()

[ segmentfault.com ] JS语法 ES6、ES7、ES8、ES9、ES10、ES11、ES12新特性