JavaScript 非同步與同步事件之 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

JavaScript 非同步與同步事件之 await

前言

await

參考資料

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

分享這篇文章

留言

前言

await

參考資料

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

JavaScript 數字格式化：最簡單的方法（千分位與貨幣）

前端工程師應該要懂的瀏覽器渲染機制

FizzBuzz for JavaScript

關於 JavaScript 中 5 種物件取值方式

分享這篇文章

留言