Web API 的過去與未來(三):主流 API 設計風格 RESTful 與 GraphQL 完整解析

更新 發佈閱讀 7 分鐘

軟體工程師職涯升級計畫啟動!立即預約職涯諮詢、履歷健檢或模擬面試👈,為您的加薪做好準備!

在理解了「前後端分離」的概念後,接下來我們要進一步探討 Web API 的設計核心。API 不只是資料的橋梁,更是開發效率與可維護性的關鍵。

本篇將聚焦於主流的兩大 API 設計風格:RESTful APIGraphQL,同時介紹它們的適用場景、實作方式與優缺點。讓你能夠根據需求做出明智選擇。


🌐 RESTful API:遵守 HTTP 規範的資源導向設計

什麼是 REST?

REST(Representational State Transfer)是一種架構風格,強調透過 HTTP 方法操作資源。遵循 REST 設計原則的 API 被稱為 RESTful API,其特點是簡潔、可預測、易於理解與快取支援佳。

RESTful 與非 RESTful 的設計差異

🧱 非 RESTful API 範例:

bash
複製編輯POST /getData → 獲取資料
POST /createData → 新增資料
DELETE /deleteData?id=1 → 刪除資料

每個動作都需自訂端點與動詞,導致命名風格混亂、維護困難。

✅ RESTful API 範例:

bash
複製編輯GET /data → 獲取資料
POST /data → 新增資料
DELETE /data/1 → 刪除資料(指定 id)

動作透過 HTTP Method 表達(GET、POST、DELETE),端點語意清晰一致。

RESTful API 的優勢

  • 🚀 快取機制成熟(如 HTTP 304)
  • 👀 結構清晰、可讀性佳
  • 🔐 配合 OAuth 等權限控制簡便

但也不是萬靈丹…

以 Airbnb 為例,一個搜尋介面可能需要顯示房源、體驗活動與地圖資訊。若這些資料分散於多個 RESTful 資源,就需多次請求才能完整呈現內容。

此外,RESTful 難以支援 高度客製化的查詢需求。常見解法如:

  • 單一 API 返回所有資料,由前端手動篩選
  • 不斷增加查詢參數與邏輯,導致維護成本升高
  • 新增多個 API,造成版本與資源爆炸

🔎 GraphQL:讓前端說了算的查詢語言

GraphQL 是由 Facebook 在 2012 年開發的 API 查詢語言,於 2015 年開源。其核心理念是:讓前端定義想要的資料結構,後端配合提供精準資料

為什麼需要 GraphQL?

移動裝置的挑戰:

  • 裝置效能受限,不適合處理多重請求
  • 網路環境不穩,頻繁請求易造成卡頓

RESTful 的痛點:

  • Overfetching:獲得過多不需要的資料
  • Underfetching:為取得完整資料,需多次請求,形成「瀑布式請求」
  • 資料 Schema 與需求不同步

GraphQL 範例:查詢作者與文章

graphql
複製編輯query {
author(id: "7") {
id
name
avatarUrl
articles(limit: 2) {
name
urlSlug
}
}
}

對應回傳:

json
複製編輯{
"data": {
"author": {
"id": "7",
"name": "Robin Wieruch",
"avatarUrl": "https://domain.com/authors/7",
"articles": [
{
"name": "The Road to learn React",
"urlSlug": "the-road-to-learn-react"
},
{
"name": "React Testing Tutorial",
"urlSlug": "react-testing-tutorial"
}
]
}
}
}

只需一次請求,便能取得多層級資料,且欄位精簡、剛好符合需求。


📊 RESTful vs GraphQL 快速比較

vocus|新世代的創作平台

✅ GraphQL 的優點總結

  • 節省頻寬:只獲取需要的欄位資料
  • 高彈性查詢:前端自由組合資料結構
  • 互動式開發體驗:工具如 GraphiQL、Apollo 可即時測試
  • Schema 驅動開發:可自動生成 API 文件,降低溝通成本

⚠️ GraphQL 的挑戰與限制

  1. 後端查詢成本增加
    • 一個複雜查詢可能跨多個資料來源或 DB 查詢,導致效能瓶頸
  2. 快取困難
    • 請求結構高度彈性,無法使用傳統 HTTP 快取
  3. 查詢限制困難
    • REST 可輕易做速率限制(Rate Limiting),但 GraphQL 查詢複雜度不一,難以量化
  4. 安全風險增加
    • 若沒設好查詢深度限制,可能導致惡意用戶發動「查詢炸彈」

🧠 結語:如何選擇 REST 與 GraphQL?

vocus|新世代的創作平台

如果你正在開發一個高度模組化、資料型態多元的產品(如電商平台、內容聚合平台),GraphQL 提供的彈性會帶來極大好處;反之,若開發的是單純 CRUD 應用,RESTful 已足夠應付,且學習成本較低。


📚 延伸閱讀推薦


需要更多實戰案例或是專案導入建議?歡迎留言或私訊交流 👇

下一篇將帶你了解 API 認證方式與 Proxy 架構設計,敬請期待!


留言
avatar-img
跨越國界的程式人生
6會員
42內容數
自學程式,現為網頁開發工程師,同時擔任線上課程講師,專注於幫助自學程式的開發者找到理想工作。熱愛技術與分享,致力於將複雜的概念轉化為實用知識,讓更多人踏入軟體開發的世界。
2025/06/26
本篇文章探討 Web API 如何促成前後端分離,以及前後端分離架構的優點。文中說明 API 的概念、Web API 的功能、前後端分離的實作方式,並分析其在程式碼維護性、開發效率、使用者體驗和技術棧方面的優勢。
Thumbnail
2025/06/26
本篇文章探討 Web API 如何促成前後端分離,以及前後端分離架構的優點。文中說明 API 的概念、Web API 的功能、前後端分離的實作方式,並分析其在程式碼維護性、開發效率、使用者體驗和技術棧方面的優勢。
Thumbnail
2025/06/25
本文探討前後端協作模式的演變,從傳統的MVC架構、模板引擎,到前後端分離的RESTful API與GraphQL,以及API認證和Proxy技術。說明前後端分離的優勢,例如提升開發效率、改進使用者體驗等,並解決前後端不分離帶來的問題。
Thumbnail
2025/06/25
本文探討前後端協作模式的演變,從傳統的MVC架構、模板引擎,到前後端分離的RESTful API與GraphQL,以及API認證和Proxy技術。說明前後端分離的優勢,例如提升開發效率、改進使用者體驗等,並解決前後端不分離帶來的問題。
Thumbnail
2025/06/23
這篇文章整理了 JavaScript 中常見的演算法與資料結構題型,包括排列組合、排序、搜尋、樹與鏈結串列等,並提供程式碼範例與說明,方便讀者快速理解與應用。適合準備前端、全端或軟體工程師面試的讀者參考。
Thumbnail
2025/06/23
這篇文章整理了 JavaScript 中常見的演算法與資料結構題型,包括排列組合、排序、搜尋、樹與鏈結串列等,並提供程式碼範例與說明,方便讀者快速理解與應用。適合準備前端、全端或軟體工程師面試的讀者參考。
Thumbnail
看更多
你可能也想看
Thumbnail
透過GraphQL提供的分頁方式,優化後端讀取資料的效能,避免過度讀取舊資料及準確指定特定項目。同時,利用Local-only field達成資料的整理或再次經過計算,提升管理和重複使用的效能。
Thumbnail
透過GraphQL提供的分頁方式,優化後端讀取資料的效能,避免過度讀取舊資料及準確指定特定項目。同時,利用Local-only field達成資料的整理或再次經過計算,提升管理和重複使用的效能。
Thumbnail
當我們在撰寫一套系統的時候, 總是會提供一個介面讓使用者來觸發功能模組並回傳使用者所需的請求, 而傳統的安裝包模式總是太侷限, 需要個別主機獨立安裝, 相當繁瑣, 但隨著時代的演進與互聯網的崛起, 大部分的工作都可以藉由網頁端、裝置端來觸發, 而伺服端則是負責接收指令、運算與回傳結果, 雲端
Thumbnail
當我們在撰寫一套系統的時候, 總是會提供一個介面讓使用者來觸發功能模組並回傳使用者所需的請求, 而傳統的安裝包模式總是太侷限, 需要個別主機獨立安裝, 相當繁瑣, 但隨著時代的演進與互聯網的崛起, 大部分的工作都可以藉由網頁端、裝置端來觸發, 而伺服端則是負責接收指令、運算與回傳結果, 雲端
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
當這產品的這個 API 被呼叫,再從回傳內容的某個欄位欄位來判斷,只要“這個欄位”顯示 false 就代表不支援」,雖然這樣的設計也能滿足功能需求…
Thumbnail
當這產品的這個 API 被呼叫,再從回傳內容的某個欄位欄位來判斷,只要“這個欄位”顯示 false 就代表不支援」,雖然這樣的設計也能滿足功能需求…
Thumbnail
此為不負責任教學,介面操作依實際情況而有所異動 額外資源參考 [API] 串接 Imgur API 圖床服務,上傳到指定相簿 israynotarray超完整 Express Imgur 套件上傳教學 [前端筆記] 用 axios 串接 imgur API上傳圖片
Thumbnail
此為不負責任教學,介面操作依實際情況而有所異動 額外資源參考 [API] 串接 Imgur API 圖床服務,上傳到指定相簿 israynotarray超完整 Express Imgur 套件上傳教學 [前端筆記] 用 axios 串接 imgur API上傳圖片
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
Thumbnail
JavaScript 套件,頁碼 Pagination.js 搭配 axios API 請求範例
Thumbnail
JavaScript 套件,頁碼 Pagination.js 搭配 axios API 請求範例
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
透過零售業的數位轉型,消費者期待獲得更多元的服務體驗。API 技術在電商、庫存管理和訂單處理等方面發揮關鍵作用,幫助企業提升效率並擴大營運範圍。API 管理平台為企業帶來高彈性、安全的 API 策略,加速數位轉型,提高企業韌性。昕力資訊的 API 管理平台為企業提供強力支持,助力產業進步。
Thumbnail
透過零售業的數位轉型,消費者期待獲得更多元的服務體驗。API 技術在電商、庫存管理和訂單處理等方面發揮關鍵作用,幫助企業提升效率並擴大營運範圍。API 管理平台為企業帶來高彈性、安全的 API 策略,加速數位轉型,提高企業韌性。昕力資訊的 API 管理平台為企業提供強力支持,助力產業進步。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News