菜鳥MIS的Coding日記

先看以下Callback的程式碼

const funcA=function(callback){
   var i=Math.random()+1;
   setTimeout(() => {
       console.log('A');
       if(typeof callback==='function'){
           callback();
       }
   }, i*1000);
};
const funcB=function(){
   var i=Math.random()+1;
   setTimeout(() => {
       console.log('B');
   }, i*1000);
};
funcA(funcB());

JS是非同步的特性，當同時呼叫兩個函式並無法預期誰會先出現，所以在過去(ES6之前)

普遍做法會把後續要做的事情透過參數傳給第一個函式(呼叫funcA函式並將funcB當成參數)，等第一個函式執行後才呼叫第二個函式，但是這作法當回呼函式變多時候，容易形成Callback Hell(回呼地獄)，為了解決這個難維護又不好閱讀的Callback Hell，從ES6開始新增了一個Promise的物件，Promise基本宣告方式如下

let myPromise=new Promise((resolve,reject)=>{...code});
//resolve代表成功後的結果，reject代表失敗的結果
接下來改寫上面Callback的程式碼

function funcA(){
   return new Promise((resolve,reject)=>{
       setTimeout(() => {
           console.log('A');
           resolve('A');
       }, 1000);
   })
}
function funcB(){
   return new Promise((resolve,reject)=>{
       setTimeout(() => {
           console.log('B');
           resolve('B');
       }, 1000);
   });
}
funcA().then(funcB);//呼叫funcA，之後得到resolve就執行funcB

Promise物件的幾種狀態

pending:進行中，狀態是未知

fulfilled:狀態是成功，對應的回呼函式是resolve

rejected:狀態是失敗，對應的回呼函式是reject