Vue3框架搭建2：axios+typescript封装

仓库地址：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();