Next.js – 使用 birc-axios 實現封裝式API

一個專案要寫 API 端點有非常多種方式，而商智中心前端群使用的是 Axios ，一個基於 Promise 的 JavaScript 網路請求庫（HTTP Client），可以用在瀏覽器和 Node.js 環境中。

探討JavaScript – Promise 與 async / await

實現 Axios

要在專案中實現 Axios ，會需要 API 核心設定檔（建立實例、攔截器），以及 業務 API 封裝檔（定義具體的請求方法）。

以往都是從其他專案複製過來，效率低下也容易出錯，因此我寫了個套件，只需執行指令即可！

npx birc-axios

Npm 網址：https://www.npmjs.com/package/birc-axios?activeTab=readme

以下為 README 中文翻譯：

這個套件會建立 axios API 包裝樣板，並存到 `services/`。

在專案根目錄執行以下指令。它會建立樣板檔案並安裝 `axios`：

npx birc-axios

接著在專案的 `.env` 設定 API 基底網址：

NEXT_PUBLIC_API_BASE_URL=https://api.example.comCode language: JavaScript (javascript)

產生的檔案：

同名檔案若已存在會略過，維持原檔內容。

services/
├── api.ts
├── request.ts
├── response.ts
└── example/
    ├── exampleAPI.ts
    └── exampleType.ts

檔案 | 用途：

`api.ts` | 兩種呼叫方式共用的 Axios 實例。設定基底網址與 JSON header，並從 `localStorage` 的 `token` 加上 `Authorization`

`request.ts` | 直接對任意網址呼叫 `get` / `post` / `put` / `patch` / `delete`

`response.ts` | 共用回應型別 `Response<T>`

`example/` | 每個功能一個檔案：優惠券 API 與其型別

兩種呼叫 API 方式

兩種方式都使用 `api.ts`，並回傳 `Response<T>`。依需求選一種即可。

直接呼叫網址

要在呼叫當下傳入網址時，使用 `request.ts`。每個端點可以共用這支檔案。

import request from '@/services/request';

type User = {
  id: string;
  name: string;
};

const user = await request.get<User>('/users/1');
const coupon = await request.get<Coupon>('/coupon/coupon-id');

if (user.result) {
  console.log(user.data);
}Code language: JavaScript (javascript)

每個功能一個檔案

每個功能有自己的 API 模組時使用這個方式。`services/example/exampleAPI.ts` 是優惠券 API。複製該檔後，改網址與型別即可。

// services/example/exampleAPI.ts
const CouponAPI = {
  get: (id: string) => API.get(`/coupon/${id}`),
  search: () => API.get('/coupon'),
};Code language: JavaScript (javascript)

import CouponAPI from '@/services/example/exampleAPI';

const coupon = await CouponAPI.get('coupon-id');
const list = await CouponAPI.search();Code language: JavaScript (javascript)

登入可有可無：

請求在未登入時也可以送出。`api.ts` 只在 `localStorage` 已有 `token` 時才加上 `Authorization`。沒有 token 時，請求仍照常送出，只是不帶驗證 header。這同時涵蓋從不登入的系統，以及同時有公開與私有端點的系統。

登入後把 token 存一次。之後兩種呼叫方式都會自動帶上：

localStorage.setItem(‘token’, ‘your token’);