JavaScript 非同步與同步事件之 await

發表於 2019-05-30 分類於 JavaScript

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

前面已經講解完 Promise 所以接下來就是講 async 與 await 是什麼東西，但是我會將這兩個東西拆開來講解做紀錄，首先先講講 await。

前言

前面已經講解完 Promise 所以接下來就是講 async 與 await 是什麼東西，但是我會將這兩個東西拆開來講解做紀錄，首先先講講 await。

await

await 在字面上就是等待的意思，簡單來講就是我必須等你，在這過程中如果你沒有結束我也絕對不會往下執行，我們先來看一下範例程式碼 ↓

let runPromiss = (name, time, status) => {
  return new Promise((resolve, reject) => {
    if(status) {
      console.log(`${name} 起跑了!`)
      return setTimeout(() => {
        resolve(`${name} 衝了 ${time / 1000}秒`)
      },time);
    } else {
     reject(new Error(`${name} 出現錯誤`));
    };
  });
};
// 小明失敗，就回傳錯誤訊息
runPromiss('小明', 3000, true).then((res) => {
  console.log(res);
  return runPromiss('小王', 1000, true)
}).then((res) => {
  console.log(res);
}).catch((error) => {
  console.log(error);
})

console.log('我偷偷執行了');

我偷偷執行了

我們可以注意到，在 Promiss 還沒結束之前就已經偷偷先落跑了一隻 console，後續才會補上 Promiss 結果，但是如果今天我們是希望先執行完呢?那就要加入 await。

(範例會不太一樣，不再使用 then)

let runPromiss = (name, time, status) => {
  return new Promise((resolve, reject) => {
    if(status) {
      console.log(`${name} 起跑了!`)
      return setTimeout(() => {
        resolve(`${name} 衝了 ${time / 1000}秒`)
      },time);
    } else {
     reject(new Error(`${name} 出現錯誤`));
    };
  });
};
// 小明失敗，就回傳錯誤訊息

let min = await runPromiss('小明', 3000, true);
console.log(min);
let wei = await runPromiss('小王', 1000, true)
console.log(wei);

console.log('我偷偷執行了');

強迫執行

我們可以發現這樣子可以強迫程式的執行順序避免有一個偷跑的程式。

參考資料

Day 14 - 二周目 - 從Promise 昇華到 async/await

JavaScript Await 與 Async