Vue3+ts封装 axios_vue3 ts axios 获取后端数据 封装

导入axios

yarn add axios 
yarn add element-plus
1
2

提示：npm i axios -- save 、 npm i element-plus --save

---

封装 axios

在utils文件夹下创建 request文件夹

1. 在request文件夹创建 mothod.ts文件，内容如下：

提示：store ，router 按照自己项目 实际配置

import axios from "axios";
import store from '@/store'; //这部分自己解决
import router from '@/router'; //这部分自己解决
// 引入 axios 实例
import type {AxiosInstance} from "axios";
import {ElLoading,ElMessage } from "element-plus";
// 引入 Loading实例
import { LoadingInstance } from 'element-plus/lib/components/loading/src/loading.d.js';
import { BsRequestConfig, BsResponse } from "@/utils/type/baseType";


/**
 * 数据请求-处理 类
 */
class RgRequest {
  instance: AxiosInstance; //axios实例
  showLoading: boolean; // 是否开启Loading
  loading?: LoadingInstance; //Loading实例
  constructor(config: BsRequestConfig) {
    this.instance = axios.create(config);
    this.showLoading = config.showLoading ?? false;
    //请求拦截
    this.instance.interceptors.request.use(
      (config) => {

        //是否Loading
        if (this.showLoading) {
          this.loading = ElLoading.service({
            lock: true,
            text: "正在请求数据...",
            background: "rgb(0,0,0)"
          });
        }

        //是否token
        if(store.getters.token){
          config.headers['Authorization'] = store.getters.token
        }

        //当为get请求，将data数据给params
        if(config.method==='get'){
          config.params = config.data;
        }

        //添加时间戳防止url缓存，后端防止重放攻击
        let timestamp = Date.parse(new Date().toString()) / 1000
        if (config.url.indexOf('?') > -1) {
          config.url += `&n=${timestamp}`
        } else {
          config.url += `?n=${timestamp}`
        }
        return config;
      },
      (err) => {
        console.log("请求拦截失败");
        return err;
      }
    );
    //接收拦截
    this.instance.interceptors.response.use(
      (res) => {
        // console.log("所有实例的拦拦截器:响应拦截成功");
        //将loading移除
        this.loading?.close();
        const data:BsResponse<any> = res.data as any;
        //其他 code处理按照自己项目处理
        if (data.code !== 200) {
           console.log('请求结果:',data.msg);
           ElMessage.error(data.msg);
        } 
        else {
          return data;
        }
      },
      (err) => {
        console.log("响应拦截失败");
        this.loading?.close();
        if (err.response.status === 404) {
          console.log("404的错误");
        }
        return err;
      }
    );
  }
  private async request<T>(config: BsRequestConfig): Promise<T> {
		return new Promise((resolve, reject) => {
			if (config.showLoading === true) {
				this.showLoading = config.showLoading;
			}
			this.instance
				.request<any, any>(config)
				.then(res => {
					this.showLoading = false;
					resolve(res);
				})
				.catch(err => {
					this.showLoading = false;
					reject(err);
					return err;
				});
		});
 }
  
/**
 * get 请求
 * @param config 参数
 * @returns 
 */
  public async get<T = any>(config: BsRequestConfig): Promise<BsResponse<T>> {
    return this.request<BsResponse<T>>({...config, method: "get"});
  }
  
  /**
   * post请求
   * @param config 
   * @returns 
   */
  public async post<T = any>(config: BsRequestConfig): Promise<BsResponse<T>> {
    return this.request<BsResponse<T>>({...config, method: "post"});
  }
  
  /***
   * delete请求
   */
  public async delete<T = any>(config: BsRequestConfig): Promise<BsResponse<T>> {
    return this.request<BsResponse<T>>({...config, method: "delete"});
  }
 
  /***
   * patch请求 局部更新使用
   */
  public async patch<T = any>(config: BsRequestConfig): Promise<BsResponse<T>> {
    return this.request<BsResponse<T>>({...config, method: "patch"});
  }

  /***
   * put请求 
   */
   public async put<T = any>(config: BsRequestConfig): Promise<BsResponse<T>> {
    return this.request<BsResponse<T>>({...config, method: "put"});
  }
}
 
export default RgRequest;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

2. 在request文件夹创建 index.ts文件，内容如下:

import RgRequest from "./method";

const Request = new RgRequest({
  baseURL: import.meta.env.VITE_BASE_API, //请求根Url,url = baseUrl+requestUrl（api路由）
  withCredentials: false,  跨域请求时发送Cookie
  timeout: 10*1000, //超时时间
  // ... 其他配置自行查看axios 参数
}); //这点的 BsRequestConfig类型 交集(&) 了 AxiosRequestConfig
 
export default Request;
1
2
3
4
5
6
7
8
9
10

3. 类型声明文件内容如下：

提示：我本身类型声明文件是在 utils/type/baseType.ts文件下

/**
 * api数据请求 类型
 */
export type BsRequestConfig = {
    showLoading?: boolean; // 是否开启Loading
    loading?: LoadingInstance; //Loading实例,
} & AxiosRequestConfig;

/**
 * 请求返回数据 
 */
export type BsResponse<T> = {
    code?: number,
    data?: T,
    extras?: any,
    msg?: string,
    timestamp?: number
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

---

使用

提示：以登录接口为例

import http from '@/utils/request'
export function login(data) {
	// any 是接口 data里面 返回的数据类型，默认不写是 any
	//可以自己声明接收类型 、与后端接口dto类似
    return http.post<any>({
      url: '/api/xx/xxx', //自己的接口路由
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }, //按照自己的后端接口要求来
      data
    })
  }
1
2
3
4
5
6
7
8
9
10
11
12

---

文档查看：

axios文档