JavaScript 非同步與同步事件之 await

發表於 | 更新於 | 分類於

前言

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

await

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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

0%