12 Oct 2025 5 min read Vibe Coding

Vibe Coding 基礎 : API vs Webhook，差別是什麼？

在上一篇文章中: HTTP API 介紹 - 打開網路服務溝通的大門，我們了解了 Client-Server Model 和 HTTP API 的基本概念。今天，我們要來談談另一個在現代 Web 開發中常見的概念：Webhook。很多人會把 API 和 Webhook 混為一談，但它們其實是兩種完全不同的通訊方式。

API：你問我答

還記得我們在上一篇提到的 Client-Server Model 嗎？API 的運作方式就像是你走進一家餐廳：

你（Client）主動詢問：「請問今天有什麼特餐？」
服務生（Server）回應：「今天的特餐是義大利麵。」

這種「你問我答」的模式，就是 API 的核心概念。Client 必須主動發送 request，Server 才會回傳 response。如果你不問，Server 就不會主動告訴你任何事情。

// API 的典型使用方式
// Client 主動發送 request
fetch('https://api.example.com/menu')
  .then(response => response.json())
  .then(data => console.log(data));

Webhook：我會主動通知你

Webhook 則完全相反，它是一種「事件驅動」的通訊方式。想像一下，你在網路商店訂了一個包裹：

你留下電話號碼（提供 Webhook URL）
包裹到了（事件發生）
物流公司主動打電話通知你（Webhook 發送通知）

你不需要每五分鐘打電話去問「包裹到了嗎？」，而是由物流公司在包裹送達時主動通知你。這就是 Webhook 的精髓。

實際案例：LINE Messaging API

讓我們看看 LINE Messaging API 如何結合這兩種概念。

使用 API 主動發送訊息

當你想要發送訊息給使用者時，你需要使用 LINE 的 API：

// 使用 LINE Messaging API 發送訊息
const axios = require('axios');

async function sendMessage(userId, text) {
  await axios.post(
    'https://api.line.me/v2/bot/message/push',
    {
      to: userId,
      messages: [{ type: 'text', text: text }]
    },
    {
      headers: {
        'Authorization': `Bearer ${CHANNEL_ACCESS_TOKEN}`,
        'Content-Type': 'application/json'
      }
    }
  );
}

這是典型的 API 使用方式：你主動呼叫 API，要求 LINE 幫你發送訊息。

使用 Webhook 接收使用者訊息

但是，當使用者傳訊息給你的聊天機器人時，你要怎麼知道呢？總不能每秒鐘都去問 LINE「有人傳訊息給我嗎？」這樣會非常沒效率。

這時候，Webhook 就派上用場了：

// 設定 Webhook endpoint 接收 LINE 的通知
app.post('/webhook', (req, res) => {
  const events = req.body.events;
  
  events.forEach(event => {
    if (event.type === 'message') {
      console.log(`收到訊息：${event.message.text}`);
      console.log(`來自使用者：${event.source.userId}`);
      
      // 在這裡處理使用者的訊息
      handleMessage(event);
    }
  });
  
  res.status(200).send('OK');
});

當使用者傳送訊息時，LINE 會主動呼叫你提供的 Webhook URL，把訊息內容傳給你。你只需要：

提供一個 endpoint（Webhook URL）
在 LINE 後台設定這個 URL
等待 LINE 主動通知你

實際案例：Shopify Webhook

Shopify 是另一個大量使用 Webhook 的好例子。當你經營一個電商網站時，會有很多重要的事件發生：

有人下單了
訂單被取消了
商品庫存改變了
訂單已出貨

如果要用 API 的方式，你就需要每隔幾秒就去問 Shopify：「有新訂單嗎？有訂單被取消嗎？庫存改變了嗎？」這樣不僅沒效率，還會浪費大量的 API 呼叫次數。

使用 Webhook，你只需要告訴 Shopify：「當有新訂單時，請通知這個網址。」

// 設定 Shopify Webhook endpoint
app.post('/shopify/order-created', (req, res) => {
  const order = req.body;
  
  console.log(`新訂單！訂單編號：${order.id}`);
  console.log(`顧客：${order.customer.name}`);
  console.log(`金額：${order.total_price}`);
  
  // 在這裡處理新訂單的邏輯
  // 例如：發送確認信、更新庫存、通知出貨部門等
  processNewOrder(order);
  
  res.status(200).send('OK');
});

API vs Webhook：該用哪一種？

現在我們理解了兩者的差異，那什麼時候該用哪一種呢？

使用 API 的時機

當你需要主動取得或操作資料時，使用 API：

取得使用者資料
發送訊息
創建訂單
搜尋商品
上傳檔案

使用 Webhook 的時機

當你需要即時知道某件事發生時，使用 Webhook：

使用者傳訊息給你
有人下單了
付款狀態改變
訂單已出貨
新使用者註冊

兩者經常一起使用

在實際應用中，API 和 Webhook 經常是搭配使用的。以聊天機器人為例：

使用者傳訊息 → Webhook 通知你（你接收訊息）
你收到通知後 → 呼叫 API 回覆訊息（你發送回覆）

或是電商的例子：

顧客下單 → Webhook 通知你（你知道有新訂單）
你處理訂單後 → 呼叫 API 更新訂單狀態（你更新資料）

Summary

理解 API 和 Webhook 的差異，就像是理解「主動詢問」和「訂閱通知」的差別：

API：你需要什麼，就主動去要。就像走進餐廳點餐。
Webhook：你留下聯絡方式，有事情發生時會主動通知你。就像訂閱包裹到貨通知。

在現代 Web 開發中，這兩種工具都是不可或缺的。API 讓你能主動取得和操作資料，Webhook 則讓你能即時接收重要事件的通知。選對工具，才能打造出既高效又即時的應用程式。

記住 Abraham Maslow 的智慧：工具箱裡不能只有錘子。API 和 Webhook 各有各的用途，了解它們的差異，才能在適當的時機選用最適合的工具！

想學習更多關於 Web 開發的實戰技巧嗎？歡迎關注訂閱 Hammer Hub ，讓我們一起用對的工具，解決真正的問題。