🔧 阿川の電商水電行

Shopify 顧問、維護與客製化

💡

小任務 / 單次支援方案

單次處理 Shopify 修正／微調

⭐️

維護方案

每月 Shopify 技術支援 + 小修改 + 諮詢

🚀

專案建置

Shopify 功能導入、培訓 + 分階段交付

👉 瞭解詳情 / 免費諮詢

小編精選 - 技術文章翻譯 · 10月27日

如何使用 Apidog 簡化 API 開發以及它與 Postman 有何不同

引言

在API開發中，規格書的管理、測試執行和模擬伺服器的建立是重要的工作。
我使用Postman已經多年，但感受到以下幾個挑戰。

在Postman中所感受到的挑戰

與Swagger的雙重管理：API規格書在Swagger中管理，測試則在Postman中執行，導致在規範更改時需同時更新兩者。
CORS錯誤的發生：使用雲端模擬時出現CORS錯誤，前端開發時需進行代理設定。

// vite.config.ts中的代理設定範例
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'https://mock.postman.com',
        changeOrigin: true,
        secure: false
      }
    }
  }
})

資料型別的可見性不足：請求和回應的資料型別不清晰，降低開發效率。

為了解決這些挑戰，我最近實際使用了受到關注的「Apidog」。本文將詳細解說其使用感受及與Postman的不同。

目標讀者

API開發者
前端和後端工程師
目前正在使用Postman的人

Apidog是什麼

Apidog是一款專注於API開發的整合開發工具。可對API規格書的創建、測試執行和模擬伺服器的建立進行統一管理。

官方網站: https://apidog.com/jp/

Postman與Apidog的差異

Postman的特點

對象：API使用者（測試・除錯）
主要用途：API的測試執行、集合管理

優點：

豐富的測試功能
大型社群
多種整合功能

缺點：

需另行管理規格書
模擬伺服器中發生CORS錯誤
資料型別的可見性低

Apidog的特點

對象：API開發者（設計・開發・測試）
主要用途：API規格書創建、模擬伺服器、測試執行

優點：

規格書・測試・模擬的統一管理
不需CORS設定
數據型別視覺化清晰
可輕鬆複製現有API規範進行遷移

缺點：

由於是相對較新的工具，社群較小
部分高級測試功能不足

比較表

項目	Postman	Apidog
規格書管理	另行需求	統一管理
模擬伺服器	發生CORS錯誤	不需CORS設定
資料型別顯示	有限	直觀且清晰
遷移成本	-	低（支援複製）
測試功能	豐富	基本功能
團隊協作	集合分享	規格共享

Apidog的主要功能

1. API規格書的統一管理

在Apidog中，可以視覺化地創建和管理API規格書。

特點：

可以立即確認資料型別
請求・回應的結構清晰易懂
團隊內的規範共享變得簡單
API規格書的創建可透過複製貼上輕鬆設置

2. 各種格式的匯入

支援格式：

OpenAPI/Swagger
Postman
Insomnia
curl

優點：

可輕鬆遷移現有的API規範
初期成本低

3. 模擬伺服器功能

雲端模擬伺服器

{
  "id": 1,
  "name": "田中太郎",
  "email": "[email protected]",
  "created_at": "2024-01-01T00:00:00Z"
}

特點：

CORS設定簡單
支援IP限制
團隊整體模擬行為統一
模擬伺服器的設置可透過JSON複製貼上輕鬆實現

在前端開發中的應用

與Postman的不同：Apidog的模擬伺服器不需CORS設定，前端可直接調用。

const response = await fetch('https://mock.apidog.com/api/users/1');
const user = await response.json();
console.log(user); // 返回模擬數據

實際開發流程：

後端開發者在Apidog中創建API規格書
設置模擬伺服器
前端開發者直接調用模擬API
不需代理設定即可開始開發

實際使用方法

1. 創建專案

登入Apidog
點擊「新建專案」
輸入專案名稱和描述

2. 創建API規格書

添加端點

此步驟與Postman幾乎相同，但Cookie的設置在Apidog中更為直觀。

設定回應範例

{
  "id": 1,
  "name": "田中太郎",
  "email": "[email protected]",
  "created_at": "2024-01-01T00:00:00Z"
}

3. 設定模擬伺服器

選擇API端點
點擊「模擬」標籤
透過複製貼上設定JSON回應（可以直接貼上現有API回應）
獲取模擬URL

複製貼上的設定範例

複製現有的API回應

{
"status": "success",
"data": {
"users": [
  {
    "id": 1,
    "name": "田中太郎",
    "email": "[email protected]"
  }
],
"pagination": {
  "page": 1,
  "limit": 10,
  "total": 100
}
}
}

4. 執行測試

curl的測試範例

# curl的測試範例
curl -X POST https://mock.apidog.com/api/users \
  -H "Content-Type: application/json" \
  -d '{"name": "山田花子", "email": "[email protected]"}'

JavaScript的測試範例

// 前端API調用示例
async function createUser(userData) {
  try {
    const response = await fetch('https://mock.apidog.com/api/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(userData)
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const result = await response.json();
    console.log('用戶創建成功:', result);
    return result;
  } catch (error) {
    console.error('發生錯誤:', error);
  }
}

// 使用示例
createUser({
  name: "山田花子",
  email: "[email protected]"
});