# 什麼是API
###### tags: `JavaScript` `JS 直播班 - 2021 秋季班`

## API是什麼?
API全名是 Application Programming Interface 應用程式介面
是一種可以向不同的地方(網站、資料庫)進行互動的介面，透過API可以發出不同的請求，而被請求的那方收到請求後就會回應資料給請求方，這時請求方就可以收到回應的結果了
在JS上通常都是用<font size=5>[AJAX](https://hackmd.io/6-uYYILtRoCPICEYOwOw3g)</font>的方式來藉由API向第三方請求資料
### **聽起來很亂嗎? 觀看個影片!!!**

{%youtube zvKadd9Cflc %}

## HTTP
HTTP是一種協定，全名是 Hypertext Transfer Protocol 超文本傳輸協定
網路上分成 伺服器 與 客戶端 ， 客戶端是提出request ， 而伺服器是接收request並發送response
例如: 我想看到pchome的購物首頁 ， 而我向pchome提出request說我想要到pchome的購物首頁，當pchome收到request後，pchome就會回送response，到時我就看的到購物首頁了! ， 當為了把這個過程有一個統一的規範就有了HTTP

## HTTP 狀態碼 之前有寫過一篇現在就搬過來看看!
[常見HTML狀態碼](https://hackmd.io/ucfaRhqVSTaKi6qSkc7SQA)

## RESTful API

REST全名是 Representational State Transfer 表現層狀態轉移 是一種設計風格
將資料新增、修改、查看、刪除寫在同一個API上面，直接透過這個API就能做不同的事情

### RESTful API 組成
1. Nouns 名詞：定義資源位置的 URL，每個資源在網路上都會有唯一的位置，就如每戶人家都有唯一的地址一樣。
2. Verbs 動詞：對資源要做的動作。
3. Content Types 資源呈現方式：API 資源可以以多種方式表現，最常用的是 JSON，較輕，也較好處理。

### RESTful API 優點
<font size=4 color=#088F3A>1. 有唯一的URL表示資源位置，統一的 API 接口。(Uniform Interface)</font>

<font size=4 color=#088F3A>2. 無狀態=>由Client保存狀態並在發出請求時一併傳給Server</font>

舉例來說，可能在用戶登錄系統時，Server 產生 token 紀錄 user 已登錄系統，然後把 token 還給 Client，在 Client 再次發送請求的時候，把 token 一起發給 Server，這樣 Server 就知道這一個 Client 是已經處於登錄的狀態，是否已登錄Server。

舉一個白話一點的例子：查詢員工工資：
第一步：登錄系統。
第二步：進入查詢工資的頁面。
第三步：搜索該員工。
第四步：點擊姓名查看工資。

這樣的操作流程就是有狀態的，查詢工資的每一個步驟都依賴於前一個步驟，只要前置操作不成功，後續操作就無法執行。如果輸入一個URL就可以直接得到指定員工的工資，這種情況就是無狀態的，因為獲取工資不依賴於其他資源或狀態，這種情況下，員工工資是一個資源，由一個 URL 與之對應可以通過 HTTP 中的 GET 方法得到資源，這就是典型的 RESTful 風格。

<font size=4 color=#088F3A>3. 可更高效利用快取來提高回應速度 (Cachable)</font>

Server => GET過一次的資源，如果沒有被變更過，可以用cache來減少request
Client => 透過 Client 端 cache 紀錄 chahe 版本，若向 server 要求資源時發現 server 最新版與 cache 相同，則 client 端直接取用本地資源即可，不需要再做一次查詢

<font size=4 color=#088F3A>4. 客戶端服務器分離 (Client-Server)</font>

<font size=4 color=#088F3A>5. 充份利用 HTTP protocal(GET/POST/PUT/DELETE) (Manipulation of resources through representations)</font>

<font size=4 color=#088F3A>6. 可執行程式碼的設計，像是 JavaScript（非必要實作項目） Code-On-Demand (optional)</font>

## 參考資料
[API 是什麼? RESTful API 又是什麼?](https://medium.com/itsems-frontend/api-%E6%98%AF%E4%BB%80%E9%BA%BC-restful-api-%E5%8F%88%E6%98%AF%E4%BB%80%E9%BA%BC-a001a85ab638)