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

堆栈地点：https://github.com/buguniao5213/LuArch
1、安装axios

1. npm install axios

复制代码

2、创建文件

先创建一个文件夹：

1. ├── src/
2. │   ├── api/        
3. │   │   ├── index.ts/   #编写axios封装代码   
4. │   │   └── example.ts/ #定义向后端服务器发送请求的模块`

复制代码

1. ├── publix/
2. │   ├── json/        
3. │   │   └── example.json/   #模拟get接口获取到的数据`

复制代码

3、导入申明

导入axios库和干系类型

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

复制代码

4、基础url定义

这个后面放到vite的缓建变量配置中（.env）

1. const BASE_URL = '/'

复制代码

5、定义request类

要素如下：

1. export class Request {
2.     private instance: AxiosInstance;
3.     private baseConfig: AxiosRequestConfig = { baseURL: BASE_URL, timeout: 60000 };
4.     public constructor() {
5.         //...   
6.     }
7.     public request() {
8.         //...   
9.     }
10.     public get() {
11.         //...   
12.     }
13.    
14.     //...
15.     //...
16. }

复制代码

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：

1. export class Request {
2.     private instance: AxiosInstance;
3.     private baseConfig: AxiosRequestConfig = { baseURL: BASE_URL, timeout: 60000 };
5.     public constructor(config: AxiosRequestConfig) {
6.         this.instance = axios.create(Object.assign(this.baseConfig, config));
8.         this.instance.interceptors.request.use(
9.             (config: any) => {
10.                 // 配置处理逻辑
11.                 // const token = 'tokentoken';
12.                 return config;
13.             },
14.             (error: any) => {
15.                 return Promise.reject(error);
16.             }
17.         )
18.         this.instance.interceptors.response.use(
19.             (res: any) => {
20.                 if(res.data.code === 200) {
21.                     return res.data.data;
22.                 }else {
23.                     // 错误code处理
24.                     return "发生错误";
25.                 }
26.             },
27.             (error: any) => {
28.                 return Promise.reject(error);
29.             }
30.         )
31.     }
33.     public request<T = any>(config: AxiosRequestConfig): Promise<T> {
34.         return this.instance.request(config);
35.     }
37.     public get<T = any>(url: string, params?: any, config?: AxiosRequestConfig): Promise<T> {
38.         return this.instance.get(url, {params, ...config});
39.     }
41.     public post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
42.         return this.instance.post(url, data, config);
43.     }
45.     public put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
46.         return this.instance.put(url, data, config)
47.     }
49.     public delete<T = any>(url: string, params?: any, config?: AxiosRequestConfig): Promise<T> {
50.         return this.instance.delete(url, {params, ...config});
51.     }
53. }

复制代码

6、创建实例，并导出为Axios

1. export const Axios = new Request({
2.     baseURL: BASE_URL,
3. });

复制代码

7、使用

a）、封装一个HTTP请求
example.ts：

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

复制代码

example.json：

1. {   
2.     "code": 200,
3.     "data": "hello word"
4. }

复制代码

b）、调用

1. import { HTLLOWORD } from '@/api/example'
3. const getTest = () => {
4.   HTLLOWORD().then(res => {
5.     console.log(res)
6.   })
7. }
9. getTest();

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。