鐵人賽 Day 14

同步與非同步

JavaScript 是一個非同步的語言，理解同步與非同步就很重要但是根據字面上的意思"同步"會讓人以為可以同時做很多事情，"同時進行"，但意思其實正好相反。
我覺得在 Node.JS文件提到的 blocking non-blocking「阻塞」與「非阻塞」更好理解，阻塞可以理解成會讓執行流程卡住，非阻塞可理解成可順暢執行。

在 Node.JS的官方文件寫到

Blocking methods execute synchronously and non-blocking methods execute asynchronously.

官方文件：https://nodejs.org/en/docs/guides/blocking-vs-non-blocking

Promise 物件

Q1.若是兩格個具有非同步特性且必須按照順序執行的函式 A、B，且不能造成 Callback Hell 該怎麼做？

Q2.若是 上述 A、B執行順序不重要，但三個函式要在 C 之前執行又要怎麼做？

Promise 物件就是這兩個問題的解法

Promise物件有三種狀態

• pending 初始狀態
• fulfilled 成功完成
• rejected 失敗

// 把 function 當參數帶入想先執行的 function 
const step1 = function(callback){
    window.setTimeout(function(){
        console.log('a');
        if (typeof callback === 'function'){
         callback();
        }
    },3000);
}

const step2 = function(){
    window.setTimeout(function(){
        console.log('b');
    },1000)
}


step1(step2);

使用 promise

function stepA(){
  return new Promise(function(resolve, reject){
      window.setTimeout(function(){
        console.log('a');
        resolve('A')
    },3000);
   });
  } 
    

function stepB(){
    return new Promise(function(resolve, reject){
        window.setTimeout(function(){
         console.log('b');
         resolve('b');
        }, 1000);
    });
}
stepA().then(stepB);

解決上面 Q2 問題可用 Promise.all 以及 Promise.race

function stepA(){
  return new Promise(function(resolve, reject){
      window.setTimeout(function(){
        console.log('a');
        resolve('A')
    },3000);
   });
  } 
    

function stepB(){
    return new Promise(function(resolve, reject){
        window.setTimeout(function(){
         console.log('b');
         resolve('b');
        }, 1000);
    });
}



Promise.all([stepA(),stepB()]).then(()=>{console.log('c');});

asyc && await

async 和 await 是更簡潔的寫法，只要定義方法時使用 async 即可。

function stepA(){
  return new Promise(function(resolve, reject){
      window.setTimeout(function(){
        resolve('A')
    },3000);
   });
  } 
    

function stepB(){
    return new Promise(function(resolve, reject){
        window.setTimeout(function(){
         resolve('b');
        }, 1000);
    });
}

async function asyncCall(){
    let result;
    result = await stepA();
    console.log(result);
     
    result = await stepB();
    console.log(result); 
    
}

asyncCall();