什麼是 Axios

Axios 是一個基於 Promise 的 HTTP 客戶端，可以用在瀏覽器和 Node.js 中，可以用在前端和後端，可以用來發送 HTTP 請求。

Axios 與專案設定

安裝 Axios

先安裝 Axios：

$ npm install axios

資料夾結構

接下來在專案的 app 資料夾下新增一個 lib 資料夾，並且在其底下再新增一個 api 資料夾。之後 lib 資料夾還可以放一些其他自定義的設定，例如 custom hook 等等。

$ mkdir app/lib && mkdir app/lib/api

然後在 api 資料夾下新增 2 個檔案：

$ touch app/lib/api/client.ts app/lib/api/endpoints.ts

client.ts 是用來設定 Axios 的設定，endpoints.ts 是用來設定 API 的路徑。

設定 Axios

首先在 client.ts 中加入以下程式碼：

import axios, { AxiosInstance } from 'axios'

interface GetParams {
  [key: string]: string | number | boolean
}

class APIClient {
  client: AxiosInstance

  constructor() {
    this.client = axios.create({
      baseURL: process.env.NEXT_PUBLIC_API_URL,
      responseType: 'blob',
      headers: {
        'Content-Type': 'application/json'
      }
    })
  }

  get(path: string, params?: GetParams) {
    return this.client.get(path, { params })
  }
}

export type { GetParams }
export default APIClient

這裡我們使用 axios.create 來建立一個 Axios 的實例，並且設定一些基本的設定，例如 baseURL、responseType、headers 等等。

並且加上一個 get 的方法，這個方法是用來發送 GET 請求的，參數的部分我們使用 params 來傳遞，這樣子就可以把參數轉換成 query string。

而且 params 可以傳遞不同的型別，例如 string、number、boolean 等等，這裡我們使用 GetParams 來定義這個型別。

設定 API 路徑

接下來在 endpoints.ts 中加入以下程式碼：

const Endpoints = {
  GenerateQrcode: {
    pngType: 'generate_qr'
  }
}

export default Endpoints

這裡我們使用物件來管理 API 的路徑，之後要新增或是編輯 API 的路徑的話，就可以直接在這裡修改。

新增 GenerateQrcode API

最後一個設定就是要把 Generate Qrcode 的 API 統一放到一個檔案中做使用，所以我們在 api 資料夾下新增一個 generateQrcode.ts 檔案，並且加入以下程式碼：

import APIClient, { GetParams } from './client'
import Endpoints from './endpoints'

const apiClient = new APIClient()

interface QrCodeParams {
  url?: string
  phone?: string
  email?: string
  address?: string
}

const generateQrcode = {
  getPng: (params: QrCodeParams) => {
    return apiClient.get(Endpoints.GenerateQrcode.pngType, params as GetParams)
  }
}

export default generateQrcode

這裡我們使用 apiClient 來發送請求，並且使用 Endpoints.GenerateQrcode.pngType 來取得 API 的路徑，最後再把參數傳遞進去。之後也會在這裡新增 POST 新增 QR Code SVG 的 API。

使用 API

完成以上的設定後，就可以把原本的 fetch 改成 axios 來發送請求了。

首先在 page.tsx 中引入 generateQrcode：

const [imgSrc, setImgSrc] = useState<string | null>(null)

useEffect(() => {
  const fetchQrCodeImage = async () => {
    try {
      const params = { url: 'https://buckychu.im' }
      const response = await generateQrcode.getPng(params)
      const blob = new Blob([response.data], { type: 'image/png' })
      const objectURL = URL.createObjectURL(blob)
      setImgSrc(objectURL)
    } catch (_) {
      console.error('Error fetching image:')
    }
  }

  fetchQrCodeImage()

  return () => {
    setImgSrc(null)
  }
}, [])

看起來運作正常，很棒👍！

總結

這篇文章介紹了如何使用 Axios 來管理 API，雖然目前的專案只有一個 API，但是如果專案越來越大的話，使用 Axios 來管理 API 會變得更加方便，明天來接另一支 API，明天見👋！