---
# System prepended metadata

title: 20230818 基本資料結構/同步非同步/Promise/Http 請求/API語法
tags: [前端課程筆記]

---

[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)
