API 是什麼,簡單看懂網頁中的API運作原理

API 是什麼,簡單看懂網頁中的API運作原理

在網路開發的領域中,常常聽到API這個名詞。究竟API 是什麼? 在網站或手機App的開發中,API是前端和後端溝通重要的橋樑。記得上次我們HTTP的文章中(參見: What Is HTTP? 從生活中的故事一次看懂HTTP)有提到:Client-Server 架構 的模式 Client就是我們的網頁、或是手機APP(客人);而 server 就是我們的伺服器(老闆)。而我們的HTTP 架構 就是在形容這兩者之間溝通的模式。 但話說回來,客人跟老闆之間要怎麼有效率的溝通呢? 舉例來說:在古代假設我們要到公家機關辦事情,針對不同人,每個客戶可能要和店小二對談很久,他可能會問你的不同需求,然後再根據談話的內容處理很久才能幫你辦好特定的項目。 但是這樣太沒效率了! 回到近代,我們現在去到一個機關會有不同的窗口,例如銀行,可能會有負責處理存款、負責處理外匯等等很多不同的窗口,而這些窗口會有各自的表格,你到相關的窗口要辦固定的項目,只要填完固定的表格就能辦好,不用像以前那樣處理很久。 而這種類似定型化窗口提供定型化契約的方式就很像我們現在所使用的API。 我們來看一個POST API的例子 例如我今天要去facebook辦帳號、就會有一個API(一串網址),只要我們對這個網址提供固定的資料(email、姓名、生日⋯等)就能把資料做相對應的處理(例如密碼加密),然後存放到資料庫中。 這個固定的資料會被整理成類似這樣的格式: { "email": "[email protected]", "password": "testpassword", "name": "test_user"} 只要送出類似這樣的資料,就能新增一筆帳號,而我們平常網頁上或手機App上的表格,只是方便我們送出這些資料,而不用了解背後運作的原理。 從上面的例子可以看出來,我們可以很方便的要處理某件事情,只要填完固定的表格,不用再多講很多廢話,可以快速的把事情辦好 — — 這就是API的魅力所在。 而上面的例子中,我們做的動作其實就是新增、創造一筆資料。這種行為我們可以把它稱為一個Create的操作。這時我們就不得不提到CRUD Operations。 CRUD Operations CRUD 代表 Create, Read, Update, Delete。也就是新增、讀取、更新和刪除。 這些是我們平常最常見的功能。 例如我們有一個Instagram帳號,我們需要有新增貼文(Create)、看別人的貼文( Read)、編輯貼文(Update)、刪除貼文(Delete)等等的操作。而這樣的模式可以應用到很多不同的網站或App中。這些都是我們每天會用到的。 而這些動作對應的HTTP 方法就是:GET, POST, PUT, DELETE 這些操作,被我們統稱為 CRUD operations API...
API 是什麼,簡單看懂網頁中的API運作原理
API 是什麼

文章索引

在網路開發的領域中,常常聽到API這個名詞。究竟API 是什麼?

在網站或手機App的開發中,API是前端和後端溝通重要的橋樑。記得上次我們HTTP的文章中(參見: What Is HTTP? 從生活中的故事一次看懂HTTP)有提到:Client-Server 架構 的模式

 API 是什麼1

Client就是我們的網頁、或是手機APP(客人);而 server 就是我們的伺服器(老闆)。而我們的HTTP 架構 就是在形容這兩者之間溝通的模式。

但話說回來,客人跟老闆之間要怎麼有效率的溝通呢?

舉例來說:在古代假設我們要到公家機關辦事情,針對不同人,每個客戶可能要和店小二對談很久,他可能會問你的不同需求,然後再根據談話的內容處理很久才能幫你辦好特定的項目。

但是這樣太沒效率了!

回到近代,我們現在去到一個機關會有不同的窗口,例如銀行,可能會有負責處理存款、負責處理外匯等等很多不同的窗口,而這些窗口會有各自的表格,你到相關的窗口要辦固定的項目,只要填完固定的表格就能辦好,不用像以前那樣處理很久。

而這種類似定型化窗口提供定型化契約的方式就很像我們現在所使用的API。

我們來看一個POST API的例子

例如我今天要去facebook辦帳號、就會有一個API(一串網址),只要我們對這個網址提供固定的資料(email、姓名、生日⋯等)就能把資料做相對應的處理(例如密碼加密),然後存放到資料庫中。

這個固定的資料會被整理成類似這樣的格式:

{
"email": "[email protected]",
"password": "testpassword",
"name": "test_user"
}

只要送出類似這樣的資料,就能新增一筆帳號,而我們平常網頁上或手機App上的表格,只是方便我們送出這些資料,而不用了解背後運作的原理。

從上面的例子可以看出來,我們可以很方便的要處理某件事情,只要填完固定的表格,不用再多講很多廢話,可以快速的把事情辦好 — — 這就是API的魅力所在。

而上面的例子中,我們做的動作其實就是新增、創造一筆資料。這種行為我們可以把它稱為一個Create的操作。這時我們就不得不提到CRUD Operations。

CRUD Operations

CRUD 代表 Create, Read, Update, Delete。也就是新增、讀取、更新和刪除。

這些是我們平常最常見的功能。

例如我們有一個Instagram帳號,我們需要有新增貼文(Create)、看別人的貼文( Read)、編輯貼文(Update)、刪除貼文(Delete)等等的操作。而這樣的模式可以應用到很多不同的網站或App中。這些都是我們每天會用到的。

而這些動作對應的HTTP 方法就是:GET, POST, PUT, DELETE

這些操作,被我們統稱為 CRUD operations

API 節點

假設今天我有一個部落格,當我們在看這個部落格網站時,其實背後會有很多的動作在跑。

例如我的網址叫做 https://chunhongweb.blog

這時候當我瀏覽部落格列表時,網頁前端可能會對

https://chunhongweb.blog/api/blogs 這個網址發出 GET request

得到的結果就是:一串部落格列表,這就其中一個API節點(endpoint)

這個節點就是像一個窗口一樣,而這個窗口專門處理的事情就是提供部落格列表。每次你去找這個窗口,他就會去資料庫中提取資料,然後呈現給你(或網頁、App)。而你的網頁、App拿到這些資料後,再根據想要的格式,把這些看起來密密麻麻的資料擺的美美的呈現給使用者看。

很多時候我可能還要取得不同格式的資料,例如一次取得一篇部落格的detail,或是限定只取得最新的10篇部落格,那這時候就會是去找這樣的窗口:

第一個網址(endpoint) 就是說 我要取得id為1的部落格的資料

第二個網址就是說我要取得所有部落格的資料,但是限制最多一次給我10個

請求參數 Query Parameters

?limit=10&order=date

這串文字就是 query parameters (請求參數)

他的格式就是 ?[參數1名稱]=[參數1內容]&[參數2名稱]=[參數2內容]&[參數3名稱]=[參數3內容]…

前面用?和網址區隔,之後每個參數之間用&區隔

我們常常上網的時候看到上面網址出現? & 後面一大串有的沒的東西,其實就只是這些參數擺放在裡面而已

這樣的參數,給我們的API節點提供更多的變化,可以在傳遞同樣的內容時,要求得到不同的回傳格式

上面就是簡單的GET API 節點的例子。

那如果是 要新增一篇部落格呢?

他的節點可能也是

https://chunhongweb.blog/api/blogs

但是這次你要對他使用 POST request 而不是 GET request

POST request 的時候夾帶內容(body)最常見的就是用JSON 的格式傳輸。

例如:

{
"title": "一篇部落格",
"content": "部落格內容"
}

像這樣的一筆資料以POST request 傳到這樣的網址,就可以新增一篇文章。

當然,根據上次提到的HTTP header,他需要你提供正確的Header 資料判斷你是誰,才能確定我可以讓你新增貼文。

而要編輯貼文時,可能是對

https://chunhongweb.blog/api/blogs/1 這個節點做 PUT request

我們可以傳這樣的內容:

{
"content": "我是更新後的內容"
}

如此就可以達到更新這篇文章的效果。

那刪除呢?也很簡單。

可能是對 https://chunhongweb.blog/api/blogs/1 做 DELETE request

他就會把這篇文章刪除了!

以上就是網路程式中API的簡介啦。之後會再做更多內容,可能還包含影片,因為這些東西真的不是三言兩語可以講完的😂

我們下期見吧!

網頁 設計

作者: 浚鋐網路科技創辦人 周家鋐

By Chiahong Chou on .

Canonical link

Exported from Medium on August 19, 2021.

API 是什麼2

相關文章