Promise - 處理同步、非同步事件 - 3 - Await 與 Async

發表於

Await

Promise 中完成會透過 then 來接收訊息（資料），若是使用 await 則會等待這段函式完成後再往下繼續執行，一個卡住的概念。
這邊沒有使用 await 語法時，原始碼最後一行的console.log並不會等 Promise 事件結束，而是先執行，在這個非同步的方法下並不會影響其他函式的運行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
let running = someone => {
  let run = Math.floor(Math.random() * 2); // 隨機產生 0 或 1
  let duration = Math.floor(Math.random() * 10) + 1; // 隨機產生 0 ~ 10
  console.log(
    someone + ' ' + '考慮是否要跑步：' + run,
    '預計跑步秒數：' + duration
  );
  return new Promise((resolve, reject) => {
    if (run) {
      window.setTimeout(() => {
        resolve(someone + ' 跑了 ' + duration + ' 秒');
      }, duration * 1000);
    } else {
      reject(someone + ' 不想跑了');
    }
  });
};
running('ASin')
  .then(data => {
    console.log(data);
  })
  .catch(data => {
    console.log(data);
  });
// 以下這段 console 會在 promise 結束前就執行
console.log('我不會等 Promise')


所以，我們若使用 await 就是讓 Promise 事件執行這段先卡住，Promise 結束前後面的程式碼都無法被執行，如下面的語法：

1
2
let asinRunning = await running('ASin'); // 卡住等待 Promise 執行完畢再往下
console.log('我不會等 Promise');

不過 await 要在 async 內才能使用，這邊是為了方便解說直接寫語法。

Async

async 也就是非同步，其本質是 promise 的語法糖 ，只要 function 標記為 async，就表示裡頭可以寫入 await 的同步語法。它的結構非常類似 Promise，只不過他能夠將 await 包在裡面，被包在裡面的 await 就如同下列的結構一樣，會依序地執行：

1
2
3
4
5
6
7
8
9
10
11
12
const runningAsync = async () => {
  let asinRunning = await running('ASin');
  let hyhRunning = await running('Hyh');
  return `${asinRunning},${hyhRunning}`;
};
runningAsync()
  .then(data => {
    console.log(data);
  })
  .catch(data => {
    console.log(data);
  });

Promise Async Await
Promise Async Await Rejected
async 本身也是類似 Promise，在執行後 return 會傳回 resolve 或 reject 的訊息，也可以使用 then() 來接收傳遞的訊息(資料)。

0%