# ==討論日期 : 4/26 ( 五 )==
||祝剛/準備踏入職場的夥伴們都可以順利~ 因為你們在公司裡都是獨特的人才||
||還在準備面試的夥伴們也一起加油! 一定會有那個屬於自己的岸邊(當然要結伴同行也沒問題:laughing: ||

## 上週複習
- [討論日期：4/17](https://hackmd.io/r6RzJFBxTGW39uhL-XgV4w?both)
<br>

## 💖 本週複習 🥰

[核心篇第七堂：非同步與 Promise](https://hackmd.io/@hexschool/ByCC6s-Ls)
<br>

### ==1. 請說明什麼是 Promise，什麼是 Async / Await==

#### 相關知識點
- [JavaScript Promise 全介紹](https://www.casper.tw/development/2020/02/16/all-new-promise/)
- [Promise 是什麼？有什麼用途？](https://www.explainthis.io/zh-hant/swe/what-is-promise)

#### 大家回答
Promise 是函式、函式建構子、物件。
Promise 本身即為異步性質。
一開始會有一個 Pending 的狀態，然後依據成功、失敗分別使用 resolve、reject 狀態，並分別對應 then、catch 接收。
這個模式是固定的，不會變。
只要是以 Promise 為基礎的方式，都是使用這種模式。

Async / Await 本身就是一個 Promise base 的方法。
其語法讓非同步的語法的結構類似於「同步語言」，更易讀且好管理。

new 出來的 Promise 物件存在原型方法 then、catch、finally。
Promise 可以直接使用 all、race、resolve、reject 的方法

- Promise 是用來優化非同步的語法，而 Async、Await 可以基於 Promise 讓非同步的語法的結構類似於 “同步語言”，更易讀且好管理，同時也是語法糖。

<br>
https://www.explainthis.io/zh-hant/swe/what-is-promise
https://www.casper.tw/development/2020/02/16/all-new-promise/

### ==2. 平常如何解決 AJAX 非同步問題？==

#### 相關知識點

#### 大家回答
- callback function
- Promise
- Promise.all()
等待全部結果回來。
同時發出請求，等待結果全部回來後再統一執行。
但中間只要有一個出錯就會當成錯誤，需要全部都成功才算成功。
- Promise.allSettled()
等待全部結果回來。
同時發出請求，等待結果全部回來後再統一執行。
1. 與 all 相比，會再多包一層物件。
多了一個自己的 status 屬性，存放 Promise 的狀態，記錄此筆是成功 (fulfilled) 或失敗 (rejected)。
原本的結果，成功會放到 value 屬性中，失敗會放到 reason 屬性中。
2. 即使中間有發生錯誤，依然會正常回來，但會記錄 status 為 "rejected"。

- Async / Await

<br>

### ==3. 請問什麼是 API==

#### 相關知識點
- [什麼是 API？](https://youtu.be/zvKadd9Cflc?si=qyg_lQJS_P3i1wjK)
- [應用程式介面](https://zh.wikipedia.org/zh-tw/%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%E6%8E%A5%E5%8F%A3)
- [瀏覽器網址輸入後](https://blog.knowbe4.com/what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser)

#### 大家回答

<br>

### ==4. 請描述你知道的 Event loop 的流程是什麼==

#### 相關知識點
- [JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue](https://www.youtube.com/watch?v=eiC58R16hb8&t=279s&ab_channel=LydiaHallie) (超詳細完整)
- [所以說event loop到底是什麼玩意兒？| Philip Roberts | JSConf EU](https://youtu.be/8aGhZQkoFbQ?si=wQ7sGPJna7pyBxNW)
- [事件循環 (Event loop)](https://hackmd.io/@qd513020/r1bq9Unr6)
- [JS底層學習筆記 - EventLoop](https://front-chef.coderbridge.io/2021/05/08/js-eventloop/)
- [怎麼理解 microtask & macrotask](https://realdennis.medium.com/%E6%80%8E%E9%BA%BC%E7%90%86%E8%A7%A3-microtask-macrotask-7754939b3c2c)

#### 大家回答
當我們在堆疊中執行 setTimeout 這個 function 時，setTimeout 實際上是一個瀏覽器提供的 API ，而不是 JS 引擎本身的功能；於是瀏覽器提供一個計時器給我們使用， setTimeout 中的 callback function（簡稱 cb）會被放到 WebAPIs 中，這時候，setTimeout 這個 function 就已經執行結束，並從堆疊中脫離。
當計時器的時間到時，會把要執行的 cb 放到一個叫做工作佇列（task queue）的地方。
這時候就輪到事件循環（event loop）的功能，它的作用很簡單—如果堆疊（stack）是空的，它便把佇列（queue）中的第一個項目放到堆疊當中；堆疊（stack）便會去執行這個項目。
<br>


<br>

### ==5. 當天會出現! ||煎炸基出沒(旺~||==

console.log("start")

setTimeout(function() {
  console.log("Hi timeout");
}, 0);

Promise.resolve().then(() => {
  console.log("Hi promise");
})

console.log("end");

#### 大家回答

<br>

## 補充
- [JavaScript基本功修練：Day28 - Fetch練習(GET和POST請求)](https://ithelp.ithome.com.tw/articles/10252941)
- [What happens when you type in a URL in an address bar in a browser?](https://blog.knowbe4.com/what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser)
- [經典前端面試題：從瀏覽器網址列輸入 URL 按下 enter 發生了什麼？](https://www.shubo.io/what-happens-when-you-type-a-url-in-the-browser-and-press-enter/)
- [那些被忽略但很好用的 Web API / MutationObserver](https://ithelp.ithome.com.tw/articles/10277536)