[API教學]用最實際的例子帶你快速了解API及Restful理念,簡單實作API方法(AJAX)

這篇文章只是淺談API及Restful,若有說錯的部分請大家多指教。

Gary
7 min readMay 10, 2019

首先,先談談到底什麼是API吧

應用程式介面 (英語:application programming interface,縮寫作 API)

以下我們直接來舉個實際例子吧

我去麥當勞買吃的,我只需要知道我要點什麼吃什麼並且告訴櫃檯人員,我不需要了解漢堡薯條怎麼做的,我只負責吃!

摁!沒錯!其實API就只是這個概念而已。

白話版本

你是點餐者(使用者),想要吃勁辣雞腿套餐,所以我櫃台店員(API)點餐,店員就會將你的餐點告知給廚房(後台),廚房製作完成餐點送出來,並且店員將餐點送到你手上。

若有冒犯侵權的話我會撤下的QQ

專業版本

使用者將資料傳遞給 API,API 會進行資料邏輯處理,處理完後產生的Respond 再透過 API 回傳給使用者。所以 API 就是我們常說的接口。

還有幾個最常看到的例子就是像Facebook、Google、Line、淘寶、微博登入、Line支付功能、Youtube數據等等一堆都是API。

接下來在了解Restful之前,要先知道REST是什麼。

REST全名Representational State Transfer,中文是表現層狀態轉換,是一種網路架構風格,他並不是一種標準。
(風格:你可以想成穿搭衣服時,我穿的韓系風格,那也沒有明文規定韓系風格是什麼,可能是長版風衣,可能是襯衫大學T搭配等等,只要有達到韓系"風格"的穿搭要點大概就是了吧XD)

也就是說

REST是推薦(建議)你照著他們的設計方式。
所以表示並不是強制性,如果沒照著他們規定的方式做也不會怎麼樣。(當然不照做就不是REST了XD)

一樣先來看一下範例最快

這是早期設計API的樣子

/api/get_file/ ( 得到檔案 )

/api/post_file/ ( 新增檔案 )

/api/update_file/ ( 更新檔案 )

/api/delete_file/ ( 刪除檔案 )

這是Restful API的樣子

/api/files/ ( GET -> 得到檔案 )

/api/files/ ( POST -> 新增檔案 )

/api/files/ ( PUT -> 更新檔案)

/api/files/ ( DELETE -> 刪除檔案 )

應該明顯看出差異性了吧~直接來說說REST吧

REST有以下設計要點:

  • 統一介面
  • 對資源的 增/刪/改/查,分別用HTTP的Method POST/DELETE/PUT/GET 對應
  • 通過URI操作資源,改變資源狀態
  • 無狀態
  • Cache

統一介面

也就是說他只有唯一的URI,可以看到上述了例子/api/files/,所有的動作(新、更、刪等等)僅透過唯一的/api/files/進行。然而就不會像早期API那般有多URI卻都在對同一個地方進行動作。

另外,通常在命名URI時都會使用複數名詞,像範例中filesUsers等等,不會出現動詞型態,如get_files,因為操作上會使用HTTP中的動詞(下方會敘述)。
這樣不僅省時省力,設計人員也能方便閱讀,還能提對Server端提高效率。

對資源的 增/刪/改/查,分別用HTTP的Method POST/DELETE/PUT/GET 對應

REST風格所有的東西皆都在HTTP協議之下完成,所有動作(動詞)都會對應到HTTP當中POST/DELETE/PUT/GET。這樣一來在設計時,就能避免多次上述所說的多URI卻都在對同一個地方進行動作等等問題。

常見的method:

GET : 取得資料或是狀態

POST : 新增一項資料

PUT : 更新一項資料。

DELETE : 指定資料刪除。

通過URI操作資源,改變資源狀態

簡單說就是我對/api/files/進行post(/put/delete等)資料的動作。

無狀態

就是說Server端不會存取client端之間的任何動作(什麼意思?
一樣舉例說明最快XD

使用者登入後, Server 端產生驗證的 token,該 token 標記該用戶已經登入的狀態,Server端不保存該token信息,而是 token返回給客戶端(e.g. 瀏覽器的 cookie/session/localStorage等等)。
當使用者發生下一次的請求,使用者端把該token重新發送給Server端,於是Server端就根據該token知道用戶已經登入的狀態

(具體實現是:第一次登入,token信息在資料庫端緩存下來,第二次請求時候從資料庫緩存查詢該用戶 token。這樣使用者狀態的信息就不需要保存在 Server 端,保存了在資料庫中,資料庫中一般採用 redis 類型的緩存數據庫)

這邊不多做token(令牌)的說明,有興趣的人可以google一下,簡單說的話就是可以分辨使用者身分的東西。

Cache

可以將部分資訊先暫存起來,日後若使用到可以直cache資料,這樣就可以減少對Server端負擔,大大提升效率。

所以照著REST的風格特點所設計出來的API就是RESTful囉~~

API實作

(VS code)先安裝json-server外掛(好用!!推

npm install -g json-server

直接利用指令建立預設json檔(也可自行建立

json-server db.json
將json檔修改成我要的資料資料

開啟json-server 指定檔名->db.json

json-server — watch db.json
按下Home網址後

進入json server

到此json已經大功告成~~~

實作用ajax撰寫API

當然還有很多方式可以撰寫api,只有資料回傳正確、格式正確,用什麼語言寫最終都可以互相串接。

--

--

Gary
Gary

No responses yet