API 是什麼？

API就是當前端要跟後端拿資料、傳資料時溝通的橋樑

API（Application Programming Interface）是一種介面，讓不同的系統之間能用同一套規則來「對話」

在 Web 開發中，API 通常指的就是 Web API (REST API)，前端透過 HTTP 請求 跟後端交換資料

API 通用語言

要讓前端與後端能順利溝通，API 必須有一套大家都能理解的「通用語言」

主要有兩個部分：

1. REST（資源導向的設計方式）

• 用 網址 (URL) 來表示要操作的「資源」
  • /users → 所有使用者
  • /users/123 → ID 為 123 的那位使用者
• 用 HTTP 方法 (Method) 來表示要做什麼操作
  • GET /users → 取得所有使用者
  • POST /users → 建立一個新使用者
  • PUT /users/123 → 更新 ID=123 的使用者
  • DELETE /users/123 → 刪除 ID=123 的使用者

2. JSON（交換資料的格式）

API 回傳的資料，支援XML、JSON、純文本、HTML，但大多用 JSON (JavaScript Object Notation)，因為它其實就是 JavaScript 的物件格式，所以在前端幾乎不用轉換就能直接使用，很方便

範例：

{
  "id": 123,
  "name": "Joanne",
  "email": "test@example.com"
}

這份 JSON 就代表一個使用者的基本資料

如何和 API 溝通？

向 API 發送請求，就是透過 HTTP Method 來表達你想做的事

• GET → 把資料拿給我
• POST → 幫我新增一筆資料
• DELETE → 幫我刪掉這筆資料
• PUT/PATCH → 幫我修改一筆舊資料（它們差別在於：PUT 通常更新整筆資料，而 PATCH 則是局部更新）

前後端與 API 的流程

假設今天要取得某資料，流程大概會是這樣：

1. 發出請求

   前端透過 fetch 發送一個 GET 請求：

const response = await fetch(`/api/all-data/${date}`);

1. 解析資料

   收到伺服器回傳的資料後，把它轉成 JavaScript 能處理的 JSON：

const allData = await response.json();

1. 處理與分發資料

   把資料丟到自己的函式裡做運算、繪圖或分析

2. 更新 UI

   最後再把結果呈現在畫面上，讓使用者看到最新資料

Note: SOAP是什麼？

當提到API的時候，有時候也會聽到 SOAP (Simple Object Access Protocol)

• SOAP其實是一種協定，而REST只是軟體的設計架構
• SOAP是一種比較舊的技術
• SOAP資料格式只支援 XML
• SOAP 則嚴謹、安全，適合金融或政府系統，而REST 靈活、輕量，適合大部分的 Web 開發

請求的樣子可能像是這樣：

(程式碼取自維基百科）

<soapenv:Envelope
	xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/"
	xmlns:xsd="http://www.w3.org/2001/XMLSchema"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
	<soapenv:Body>
		<req:echo xmlns:req="http://localhost:8080/wxyc/login.do">
			<req:category>classifieds</req:category>
		</req:echo>
	</soapenv:Body>
</soapenv:Envelope>

參考資料

https://aws.amazon.com/tw/compare/the-difference-between-soap-rest/

https://zh.wikipedia.org/zh-tw/%E7%AE%80%E5%8D%95%E5%AF%B9%E8%B1%A1%E8%AE%BF%E9%97%AE%E5%8D%8F%E8%AE%AE

https://aws.amazon.com/tw/what-is/api/