前言

在這邊會偏向複習非同步用法、釐清 promise 函式與 async/await 的想法。建議可以對非同步已經有一點了解再看~

非同步的種類在下篇文章，會有 Promise.all、Promise.allSettled 的介紹與差別。

什麼是非同步

同步執行(sync) 也叫做單執行緒(single thread)，意思是程式會「按照順序」執行；一個函式或請求跑完，才會繼續下一個請求。例如 JavaScript 原本就是單執行緒的。

非同步執行(async)，則是可以控制函式或請求，在同個時間起跑，可以減少掉互相等待執行的時間。例如callback、promise、async/await，就是非同步函式。

關於callback function

callback function = 在條件(例如等兩秒、或是做完某些指令)發生後，要用這個callback function 通知我。

此時這個 callback 是名詞而不是動詞，假如今天要呼叫的callback function 叫 test，那應該要寫作 test(函式名)，而不是寫 test()(呼叫此函式)。

看到以上的論述，是不是會想問，那 setTimeOut 是一種 callback function 嗎?

setTimeOut 他是「看起來」非同步，它只是讓瀏覽器另外開一個執行緒去執行function

藉由機制不斷偵測 call stack 是否為空，如果是空的，就把 callback queue 裡面的東西丟到 call stack。
https://hackmd.io/@Heidi-Liu/note-javascript-callback

要怎麼做到非同步

要怎麼讓程式非同步執行呢？已經2023的我們可能會需要的是…

\ promise函式(ES6用法) /　　\ async、await(ES7用法) /

非同步的寫法

promise

搭配範例的說明：先 new 一個 Promise，其中裡面的 resolve 和 reject 各是函數，因為式非同步，所以要用 .then() 的方法來看到成功(res)或失敗(err)的內容。

另外也可以用 .catch() 來捕捉錯誤訊息。

let promise = new Promise(function(resolve, reject) {
	... //欲非同步的內容
});

promise
.then((res) => {
  console.log(res);
}
, (err) => {
	console.log(res);
})

resolve 函數

(res) => {
  console.log(res);
}

reject 函數

(err) => {
	console.log(err);
}

async / await

搭配範例的說明：非同步的函式，都需要加上 async 和 await，並且 await 後的function回傳的會是一個 promise，所以會需要用 .then() 的方式來寫那個 functionA

async function(){
	await functionA
}

async functionA(){
	await axios.get(URL)
	.then(function(res){...})
	.catch(function(error){...})
}

結語

在做這篇之前，對callback function的定義、印象都有點模糊，只知道用法，但不知道「為什麼」要這樣用。將自己的理解整理起來。

今天就到這，如有說明不周或錯誤的地方，還請多留言討論(鞠躬)。

參考

callback function：
https://hackmd.io/@Heidi-Liu/note-javascript-callback
https://blog.techbridge.cc/2019/10/05/javascript-async-sync-and-callback/