學習筆記 | 什麼是 API ?

更新於 發佈於 閱讀時間約 2 分鐘

先前幾篇筆記介紹了網路請求瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!


在維基百科的介紹裡,API 的全名是 Application Programming Interface,直譯就是「應用程式介面」,它提供了一組定義好的規則和工具,讓不同的軟體系統之間能夠互相溝通和互動,這個互動可以是獲取資料、傳送資料、執行遠端操作...等。


字面上看起來有點抽象,但我們可以把 API 想像成「餐廳服務生」,就像到餐廳點餐時,你不需要知道餐點是如何完成的,只需要告知服務生你需要的餐點,並且等待餐點送來,就可以享用美食了,也可以想成是「飲料販賣機」,你不需要知道機器是如何運作,只要在販賣機台按下想喝的飲料,等待飲料掉落即可。



由此可見,API 就類似一個平台或一種媒介,讓使用者可以透過這個平台/媒介,取得想要的東西,讓傳遞資料變得更加方便。


因此在軟體開發時,有了 API 的幫助,前端不需要花費大量時間去理解資料庫的程式邏輯,只需要依照 API 的說明文件來操作,就可以取得想要的結果及資料,使前端開發者可以更加專注在本身的功能開發上囉。


API 的種類也相當多,舉凡登入身分驗證、Map Service、金流支付等功能,都有 API 再背後進行資料的傳遞,而前端常用的 API 一是公司內部 API,二是第三方服務的 API。


公司內部 API 會由後端工程師依據需求來建構,第三方服務則像是 Facebook 、Line 等公司,都有提供多種open API ,讓開發者可以在自己的專案上串接並使用相關的服務唷!


另外,API 的撰寫/設計風格也有許多種,根據設計風格的不同,前端開發時取用資料的方式也會有所差異,目前最常用的是RESTful API,可以參考這篇文章【RESTful API 又是什麼?】,今天的筆記就到這邊啦~


我是Amber,前端學習中,歡迎交流討論🧸


參考文章 & 影片

API 到底是什麼?

什麼是 API?

應用程式介面是什麼? API種類介紹



留言
avatar-img
留言分享你的想法!
avatar-img
Amber hh的沙龍
23會員
22內容數
Amber hh的沙龍的其他內容
2024/09/04
第三次月會來了!這個月的主題是「工程師的溝通秘訣」 很多人認為,當工程師只要跟電腦對話就好,在轉職之前我也這麼認為的,尤其是以前在服務業工作,從早到晚跟客戶對談、處理他們各種疑難雜症和情緒的過程,實在太容易讓我感到心累了,倒不如整天跟電腦對話,對錯很明顯,也不用顧及雙方情緒,肯定比處理客訴簡單
Thumbnail
2024/09/04
第三次月會來了!這個月的主題是「工程師的溝通秘訣」 很多人認為,當工程師只要跟電腦對話就好,在轉職之前我也這麼認為的,尤其是以前在服務業工作,從早到晚跟客戶對談、處理他們各種疑難雜症和情緒的過程,實在太容易讓我感到心累了,倒不如整天跟電腦對話,對錯很明顯,也不用顧及雙方情緒,肯定比處理客訴簡單
Thumbnail
2024/08/03
JSDoc 全名是 JavaScript Documentation,顧名思義是為 JavaScript 所使用的 API 文件,在程式碼內透過註解的方式撰寫,運行後 JSDoc 會自動掃描註解內容,並生成一份網頁版的文件,對於沒有使用 Typescript 開發的專案,也
Thumbnail
2024/08/03
JSDoc 全名是 JavaScript Documentation,顧名思義是為 JavaScript 所使用的 API 文件,在程式碼內透過註解的方式撰寫,運行後 JSDoc 會自動掃描註解內容,並生成一份網頁版的文件,對於沒有使用 Typescript 開發的專案,也
Thumbnail
2024/07/24
剛開始學前端都是跟著六角的課程進度走,雖然知道自己不會的技術很多,但至少有明確的學習目標,也會定期產出結果,當時的焦慮來源只覺得時間總是不夠,殊不知真正踏入實務工作後,除了焦慮時間不夠之外,甚至還有點迷失了方向。 轉職後的公司僅一人前端,我沒有 mentor 帶領,也找不到可以效仿學習的 Ro
Thumbnail
2024/07/24
剛開始學前端都是跟著六角的課程進度走,雖然知道自己不會的技術很多,但至少有明確的學習目標,也會定期產出結果,當時的焦慮來源只覺得時間總是不夠,殊不知真正踏入實務工作後,除了焦慮時間不夠之外,甚至還有點迷失了方向。 轉職後的公司僅一人前端,我沒有 mentor 帶領,也找不到可以效仿學習的 Ro
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
需求情境: 在設計畫面時,資料來源是後台的 api,每一次畫面細節的修修改改,都會觸發 Xcode Preview 程序,導致不斷呼叫後台。此時若資料結構和大小都具有一定規模,就會導致效率低落,不斷等待,且消耗伺服器資源甚鉅。 解決方案: 將後台傳回的資料以檔案形式暫存在本地端,每次 pr
Thumbnail
需求情境: 在設計畫面時,資料來源是後台的 api,每一次畫面細節的修修改改,都會觸發 Xcode Preview 程序,導致不斷呼叫後台。此時若資料結構和大小都具有一定規模,就會導致效率低落,不斷等待,且消耗伺服器資源甚鉅。 解決方案: 將後台傳回的資料以檔案形式暫存在本地端,每次 pr
Thumbnail
此為不負責任教學,介面操作依實際情況而有所異動 額外資源參考 [API] 串接 Imgur API 圖床服務,上傳到指定相簿 israynotarray超完整 Express Imgur 套件上傳教學 [前端筆記] 用 axios 串接 imgur API上傳圖片
Thumbnail
此為不負責任教學,介面操作依實際情況而有所異動 額外資源參考 [API] 串接 Imgur API 圖床服務,上傳到指定相簿 israynotarray超完整 Express Imgur 套件上傳教學 [前端筆記] 用 axios 串接 imgur API上傳圖片
Thumbnail
在API介接中使用x-www-form-urlencoded格式時,可能會遇到一些踩坑的情況,本文分享了作者在這方面遇到的問題和解決方法。
Thumbnail
在API介接中使用x-www-form-urlencoded格式時,可能會遇到一些踩坑的情況,本文分享了作者在這方面遇到的問題和解決方法。
Thumbnail
當我們在撰寫一套系統的時候, 總是會提供一個介面讓使用者來觸發功能模組並回傳使用者所需的請求, 而傳統的安裝包模式總是太侷限, 需要個別主機獨立安裝, 相當繁瑣, 但隨著時代的演進與互聯網的崛起, 大部分的工作都可以藉由網頁端、裝置端來觸發, 而伺服端則是負責接收指令、運算與回傳結果, 雲端
Thumbnail
當我們在撰寫一套系統的時候, 總是會提供一個介面讓使用者來觸發功能模組並回傳使用者所需的請求, 而傳統的安裝包模式總是太侷限, 需要個別主機獨立安裝, 相當繁瑣, 但隨著時代的演進與互聯網的崛起, 大部分的工作都可以藉由網頁端、裝置端來觸發, 而伺服端則是負責接收指令、運算與回傳結果, 雲端
Thumbnail
JavaScript 套件,頁碼 Pagination.js 搭配 axios API 請求範例
Thumbnail
JavaScript 套件,頁碼 Pagination.js 搭配 axios API 請求範例
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
Request內容 package main import ( "fmt" "log" "net/http" "strings" ) func request(w http.ResponseWriter, r *http.Request) { //這些資訊是輸出到伺服器端的列印訊息
Thumbnail
Request內容 package main import ( "fmt" "log" "net/http" "strings" ) func request(w http.ResponseWriter, r *http.Request) { //這些資訊是輸出到伺服器端的列印訊息
Thumbnail
提到後端工程師,似乎就只是開發 API,但一個複雜的系統其實不太可能只透過 API 就能完成,例如一個簡單的功能,註冊會員,其實是由好幾個不同類型的工作互相配合,您才能收到開通信,才確保資料庫不會有一堆未開通帳號等。所以今天就來聊聊一個系統有幾種不同執行方式的工作。
Thumbnail
提到後端工程師,似乎就只是開發 API,但一個複雜的系統其實不太可能只透過 API 就能完成,例如一個簡單的功能,註冊會員,其實是由好幾個不同類型的工作互相配合,您才能收到開通信,才確保資料庫不會有一堆未開通帳號等。所以今天就來聊聊一個系統有幾種不同執行方式的工作。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News