[TOC] ### 1. queue 佇列 (1)先進先出 FIFO (First-In-First_Out) (2)新增元素:Push (3)取出元素:Pop (4)概念類似於洗衣籃,把衣服一件一件丟進去,拿的時後會先拿到最上面的(最後丟入的衣服) (5)範例 有一個陣列: [0,1,2,3,4] pop → 取得4,陣列變為: [0,1,2,3] push 5 → 陣列變為: [0,1,2,3,5] ### 2. JS運作原理 call stack 呼叫堆疊 (1)用於記錄目前執行到城市的哪個部分 (2)進入function時會push到stack中 (3)當return時會從stack中pop out 詳細解說: ![](https://hackmd.io/_uploads/Hk-ieXyan.png) ![](https://hackmd.io/_uploads/H1doe7yTn.png) ![](https://hackmd.io/_uploads/Sy0igmy62.png) ![](https://hackmd.io/_uploads/B1unxXJ6n.png) ![](https://hackmd.io/_uploads/Syp3eXyph.png) ![](https://hackmd.io/_uploads/BkSpgX162.png) ### 同步/非同步 #### 1. Synchronous同步 ![](https://hackmd.io/_uploads/B1ywbQ16n.png) #### 2. Asynchronous非同步 ![](https://hackmd.io/_uploads/BkX_ZmJT2.png) 回呼 (1)現實中,當留語音訊息時會說: Please call me back (2)callback即: 當某function執行後,要做的事 (3)callback function需當成參數傳入function (4)範例 (myCallBack即為func 的 callback function) ![](https://hackmd.io/_uploads/B14WYmkT2.png) #### setTimeout 1. 延遲 2. 參數1:callback(時間到要做的事) 3. 參數2:時間(milliseconds) 4. 範例 ![](https://hackmd.io/_uploads/ryL49X1an.png) ![](https://hackmd.io/_uploads/BJWH9Xyp3.png) ### 3. Promise事件 (1)專門用來處理非同步操作的資料結構 ![](https://hackmd.io/_uploads/HkL91r1ph.png) ### 新增Promise物件 (1)建構 ![](https://hackmd.io/_uploads/S1ufxBJan.png) (2)執行完畢 ![](https://hackmd.io/_uploads/B1f4gS1T2.png) (3)執行錯誤 ![](https://hackmd.io/_uploads/B1iLgSJTn.png) ### 串接非同步流程 #### (1)then(執行完畢要做的事) ![](https://hackmd.io/_uploads/ryQCgr1an.png) #### (2)catch(執行錯誤後要做的事) ![](https://hackmd.io/_uploads/ryiJbrJa2.png) 範例 ![](https://hackmd.io/_uploads/BJWwXB1Tn.png) ![](https://hackmd.io/_uploads/ryKDmBkp2.png) ![](https://hackmd.io/_uploads/Bk-uQryan.png) ![](https://hackmd.io/_uploads/HJ3O7Skpn.png) 將上方的callback hell使用Promise改寫 ![](https://hackmd.io/_uploads/HJmVNS1ah.png) ![](https://hackmd.io/_uploads/r1S09Iyph.png) ![](https://hackmd.io/_uploads/BJgbJsIJ6n.png) ![](https://hackmd.io/_uploads/rk_esIJa2.png) ![](https://hackmd.io/_uploads/S1j-jLypn.png) ### Web API 1. Application Programming Interface應用程式介面 2. 透過網路進行交換資訊的管道 ![](https://hackmd.io/_uploads/BJHEoIkah.png) ![](https://hackmd.io/_uploads/HyW1Ho8kan.png) ![](https://hackmd.io/_uploads/rJhHoUkph.png) ### CRUD API的常見行為模式 Create 新增 新增訂單 Read 讀取 查看訂單 Update 更新 更新訂單 Delete 刪除 刪除訂單 ### HTTP Request內容格式 ![](https://hackmd.io/_uploads/S16Ps81p2.png) ![](https://hackmd.io/_uploads/SJLrnUkT2.png) ### Fetch基本語法 ![](https://hackmd.io/_uploads/HJRY3IkT3.png) ![](https://hackmd.io/_uploads/SJOs3Lkph.png)