倉庫地址：https://github.com/buguniao5213/LuArch（分支代碼未上傳，完整一系列后傳一波，中途有需求可以再傳）

1、安裝axios

npm install axios

2、創建文件

先創建一個文件夾：

├── src/
│   ├── api/        
│   │   ├── index.ts/   #編寫axios封裝代碼    
│   │   └── example.ts/ #定義向后端服務器發送請求的模塊`

├── publix/
│   ├── json/        
│   │   └── example.json/   #模擬get接口獲取到的數據`

3、導入申明

導入axios庫和相關類型

import axios, { type AxiosInstance, type AxiosRequestConfig } from 'axios';

4、基礎url定義

這個后面放到vite的緩建變量配置中（.env）

const BASE_URL = '/'

5、定義request類

要素如下：

export class Request {private instance: AxiosInstance;private baseConfig: AxiosRequestConfig = { baseURL: BASE_URL, timeout: 60000 };public constructor() {//...    }public request() {//...    }public get() {//...    }//...//...
}

a）、private instance：私有屬性instance:Axios實例

b）、private baseConfig：基本配置，包括基礎URL和超時時間

c）、public constructor：構造函數

創建Axios實例，合并基本配置和傳入配置

設置請求攔截器：可以添加token等認證信息

設置響應攔截器：處理相應數據，根據狀態碼決定返回數據或報錯誤信息

d）、請求方法設置：

request：通用請求方法。

get：GET請求方法。

post: POST 請求方法

put: PUT 請求方法

delete: DELETE 請求方法

完整代碼如下：

index.ts：

export class Request {private instance: AxiosInstance;private baseConfig: AxiosRequestConfig = { baseURL: BASE_URL, timeout: 60000 };public constructor(config: AxiosRequestConfig) {this.instance = axios.create(Object.assign(this.baseConfig, config));this.instance.interceptors.request.use((config: any) => {// 配置處理邏輯// const token = 'tokentoken';return config;},(error: any) => {return Promise.reject(error);})this.instance.interceptors.response.use((res: any) => {if(res.data.code === 200) {return res.data.data;}else {// 錯誤code處理return "發生錯誤";}},(error: any) => {return Promise.reject(error);})}public request<T = any>(config: AxiosRequestConfig): Promise<T> {return this.instance.request(config);}public get<T = any>(url: string, params?: any, config?: AxiosRequestConfig): Promise<T> {return this.instance.get(url, {params, ...config});}public post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {return this.instance.post(url, data, config);}public put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {return this.instance.put(url, data, config)}public delete<T = any>(url: string, params?: any, config?: AxiosRequestConfig): Promise<T> {return this.instance.delete(url, {params, ...config});}}

6、創建實例，并導出為Axios

export const Axios = new Request({baseURL: BASE_URL,
});

7、使用

a）、封裝一個HTTP請求

example.ts：

import { Axios } from '@/api'export function HTLLOWORD() {return Axios.get<any>('/json/example.json')
}

example.json：

{   "code": 200,"data": "hello word"
}

b）、調用

import { HTLLOWORD } from '@/api/example'const getTest = () => {HTLLOWORD().then(res => {console.log(res)})
}getTest();