EP 01 | Asynchronous JS 的運用 - 什麼是 Async JavaScript?

發表於 更新於 分類於 ，

一直以來都不是很了解 promise 、 fetch 、 async await 等等的區別及運用，所以特地用這一系列的筆記加深自己的印象。

Synchronous JavaScript(同步 JS )的概念

**JavaScript 是 single threaded (單執行緒 / 單線程)**， single threaded (單執行緒 / 單線程)簡單來說就是只有一個執行緒(主執行緒)可以用來處理工作，並且一個執行緒一次也只能完成一個工作。

詳細的解釋可以參考程序(進程)、執行緒(線程)、協程，傻傻分得清楚！。

同步 JS (Synchronous JavaScript)發生情況

也因為JavaScript 是 single threaded (單執行緒 / 單線程)的，所以當 JS 中某段程式碼需要花費很長時間才能執行完畢或發送請求等待返回訊息時，在這段期間內這個執行緒是無法進行其他操作的(這種情況稱為阻塞或 blocking)，一定要等該段程式碼執行完畢才能接續執行接下來的程式碼，這種狀況就被稱為同步 JS 。

1
2
3
4
// 由上到下依序執行
console.log('statement 1')
console.log('statement 2')
console.log('statement 3')

Asynchronous JavaScript(非同步 JS )的概念

Asynchronous 的概念就是為了讓程式能在同一個時間處理不同的任務，以節省等待的時間。

1
2
3
4
5
6
7
8
// 由上到下依序執行
//但 setTimeOut 裡的 console 會是最後出現 → 非同步 JS
console.log('statement 1')
setTimeout(()=>{
  console.log('完成 callback fn')
},2000)
console.log('statement 2')
console.log('statement 3')

參考資料

MDN - 通用异步编程概念

程序(進程)、執行緒(線程)、協程，傻傻分得清楚！

MDN - 异步JavaScript简介

Understanding Asynchronous JavaScript