封裝Axios管理api

前言

最近專案有新的需求需要協助同事在前端建置簡單的管理架構，方便他未來在專案上能夠好好地進行管理以及規劃，建置的同時我也將自己的方法給記錄下來，方便未來做使用以及對自己的省思。

實作方法

封裝 Axios 可以幫助自己在整個應用程序中共享請求邏輯並輕鬆更改 Axios 設定。以下是一些簡單地封裝 Axios 的方法：

1.創建一個 APIClient

創建一個 APIClient 他必須具有 Axios 介面和一些方法的類別，這些方法用於執行各種請求。範例如下：

import axios, { AxiosInstance } from 'axios';

export class ApiClient {
  private readonly baseURL = 'https://api.example.com';
  private readonly client: AxiosInstance;
  
  constructor() {
    this.client = axios.create({ 'baseURL': this.baseURL });
  }

  async get<T>(url: string): Promise<T> {
    const response = await this.client.get<T>(url);
    return response.data;
  }

  async post<T>(url: string, data: any): Promise<T> {
    const response = await this.client.post<T>(url, data);
    return response.data;
  }

  async put<T>(url: string, data: any): Promise<T> {
    const response = await this.client.put<T>(url, data);
    return response.data;
  }

  async delete<T>(url: string): Promise<T> {
    const response = await this.client.delete<T>(url);
    return response.data;
  }
}

在這個範例中，我創建了一個名為 ApiClient 的類別，它使用 Axios 創建了一個實體，並包含了 get 、 post 、 put 和 delete 方法，用於執行 GET 、 POST 、 PUT 和 DELETE 請求。還將泛型 T 用於返回類型，以便 TypeScript 可以檢查響應數據的類型。

2.創建一個 api service

創建一個 api service 並且將 ApiClient 實體化就可以使用 ApiClient 對api進行呼叫，並且創建相關使用的方法提供其他程式來呼叫api：

import { ApiClient } from '../api-client.service';
import { User } from '../models/user.model';

const apiClient = new ApiClient();

export async function getUser(id: number): Promise<User> {
    return apiClient.get<User>( /users/${id} );
}

export async function updateUser(user: User): Promise<User> {
    return apiClient.put<User>( /users/${user.id} , user);
}

這個個範例中我創建了 GET 、 PUT 兩個方法且帶入 api 的 path 用來呼叫所需的資料，這邊的泛型Ｔ我引入了 User 這個 Model 來做為返回的類型，以便資料回傳時能接收對應的資料。