tags: 鐵人賽 React javascript nodejs

鐵人賽第26天，今天我們要來介紹另一種實踐Promise的指令async...await

Async的用

• async是另一種呼叫異步程序，也就是Promise的方法。
• 用法相當的直覺，在某個func前面加個async，編譯器就會知道，這個func會回傳一個Promise，因此自動的包裝他在Promise.resolve(回傳值)

先來個Promise簡單的範例，

• 啟動resolve
• 用then接收resolve的結果

let p = Promise.resolve("okla") // 啟動resolve
p.then(res=>console.log(res))   // 接收resolve的資訊，順勢印出 okla

Async的範例

• 看完底下範例，你會覺得async相當容易上手，async func回傳的Promise，讓我們可以直接使用then/catch/finally。

 async function test(){
   return "okla";
 }

// let test = async ()=>"okla"; //<--使用async+arrow func的範例
test().then(res=>console.log(res))

async...await

• await與async密不可分，也就是說，await必須使用在async func之內。
• await代表的意思~我等待著這個Promise直到它處理完！!

async function waitForMe() {
  let p = new Promise((res)=>{

    // 讀秒
    for(let i=1; i<=5; i++){
     setTimeout(()=>console.log(`${i} sec`), i*1000); }

    // 5秒後送用resolve送出資訊
    setTimeout(()=>res("okla"),5000)
    });
  
  let result = await p; //<-- await作為等待,直到這個Promise結束
  console.log(result);

  // p.then(res=>console.log(res)) //<-- 當然，還是可以用 then()來接收
}

waitForMe();

• 依序印出

1 sec
2 sec
3 sec
4 sec
5 sec
okla

用async...await改寫一下Promise的範例

Promise-chain

function wait(delay){
  return new Promise(resolve => {
    setTimeout(resolve,delay); 
  });
};

wait().then(() => {
  console.log("1st call");     // 印出1st call
  return wait(1000);           // 等待一秒後觸發
}).then(() => {
  console.log("2nd call");     // 印出2nd call
  return wait(2000);           // 等待二秒後觸發
}).then(() => {
  console.log("Finished");     // 印出 Finished
});

async...await範例

• 我們來看看改寫後的範例，程式碼更直覺俐落！

function wait(delay){
  return new Promise(resolve => {
    setTimeout(resolve,delay); 
  });
};

async function Run(){
  console.log("1st call");     // 印出1st call
  await wait(1000);            // 等待一秒後觸發
  console.log("2nd call");     // 印出2nd call
  await wait(2000);            // 等待二秒後觸發
  console.log("Finished");     // 印出 Finished
}

Run() // 啟動async

結論

• 這幾天我們從Promise的原理，到async...await的運用，相信各位對異步程序有了更深一層的了解！
• 鐵人賽第26天，倒數饅頭了，繼續加油!!