F2E 前端工程文件

Appearance

Axios 模組化實戰：從封裝進化到專業的檔案架構 ​

在前一章我們學會了如何封裝 Axios，但將所有邏輯塞在同一個檔案並不利於 團隊協作 與 單元測試。模組化 (Modularization) 的核心價值在於「職責分離」，讓開發者能更快速地定位問題並擴充功能。

為什麼需要模組化？ ​

模組化不僅是為了好看，更是為了實現以下目標：

  • 單一職責原則 (SRP)：每個檔案只負責一件事（建立實體、處理邏輯或攔截請求）。
  • 提高複用性：元件不再依賴特定的 Axios 配置，而是直接呼叫工具模組。
  • 目錄結構化：讓新進成員能一眼看出專案的 API 邏輯置於何處。

推薦的專案目錄結構 ​

在現代前端開發中，我們通常將與框架無關、可複用的工具函數置於 utils 目錄。Axios 的模組化建議採用以下路徑：

src/
 ├─ utils/                    # 通用工具函式庫
 │   └─ axios/                # Axios 模組化核心
 │       ├─ instance.js       # 負責環境設定與實體建立
 │       ├─ api.js            # 負責通用方法封裝 (GET/POST...)
 │       └─ interceptors.js   # 負責 Token 與錯誤處理攔截
 ├─ App.vue
 └─ main.js                   # 進入點，負責註冊攔截器

模組化檔案詳解 ​

實體設定 (instance.js) ​

專注於「在哪裡請求」以及「請求的預設規則」。

js
import axios from "axios";

const instance = axios.create({
  baseURL:
    import.meta.env.VITE_API_URL || "https://jsonplaceholder.typicode.com",
  timeout: 5000,
  headers: {
    "Content-Type": "application/json",
  },
});

export default instance;

通用方法封裝 (api.js) ​

將 Axios 原生的方法轉化為更符合專案需求、更乾淨的呼叫介面。

js
import instance from "./instance";

export default {
  async GET(endPoint, config = {}) {
    try {
      const res = await instance.get(endPoint, config);
      return res.data;
    } catch (err) {
      console.log(err);
    }
  },
};

邏輯攔截器 (interceptors.js) ​

將複雜的認證邏輯與錯誤狀態碼處理抽離成獨立函式。

js
import instance from "./instance";

export default () => {
  instance.interceptors.request.use(
    (req) => {
      const token = localStorage.getItem("token");

      if (token) req.headers.Authorization = `Bearer ${token}`;
      return req;
    },
    (err) => Promise.reject(err),
  );

  instance.interceptors.response.use(
    (res) => res,
    (err) => {
      switch (err?.response?.status) {
        case 401:
          console.log("權限過期");
          break;
        case 403:
          console.log("沒有權限");
          break;
        case 500:
          console.log("伺服器錯誤");
          break;
        default:
          console.log("網路有問題");
          break;
      }

      return Promise.reject(err);
    },
  );
};

在 main.js 全域註冊 ​

js
import { createApp } from "vue";
import App from "./App.vue";
// 匯入攔截器初始化函式
import setupInterceptors from "@/utils/axios/interceptors";

// 執行註冊
setupInterceptors();
createApp(App).mount("#app");

延伸：utils 目錄的其他必備工具 ​

除了 Axios，一個成熟的專案通常會在 utils 目錄下放置以下功能，讓開發更有效率：

  • 格式化：日期、貨幣、數字格式化工具。
  • Storage：封裝 localStorage 與 sessionStorage 的讀取與過期處理。
  • 驗證工具：表單欄位、Email、手機號碼的正則表達式驗證。
  • 效率相關：常用的 debounce 或 throttle 函式。
  • 權限判斷。
  • 常數管理。

透過這種「高內聚、低耦合」的模組化管理，您的專案將具備更高的健壯性，也能輕鬆應對日益成長的業務需求！

Copyright © 2025-Present