Uniapp请求的ts封装# 封装基础模块
// requset/fetchRequest.ts
export type fetchConfigResponseType= "arraybuffer"|"text";
export type fetchConfigDataType = "json"|"text";
export type fetchConfigMethod= "GET"|"POST"|"PUT"|"DELETE"|"CONNECT"|"HEAD"|"OPTIONS"|"TRACE";
export interface fetchConfigSuccessType{
data:object|string|ArrayBuffer,
statusCode:number,
header:object,
cookies:Array<string>
}
export interface fetchConfig {
url?:string,
/** 定义成功的服务器返回的状态码成功的标志 */
statusCode?:number,
data?:object|string|ArrayBuffer,
header?:object,
method?:fetchConfigMethod,
timeout?:number,
dataType?:fetchConfigDataType,
responseType?:fetchConfigResponseType,
sslVerify?:boolean,
withCredentials?:boolean,
firstIpv4?:boolean,
success?:Function,
fail?:Function,
complete?:Function
}
const requestMap: Map<any, UniApp.RequestTask> = new Map()
let config: fetchConfig = {
url: "",
data: {},
statusCode: 200,
header: {
// "content-type":"application/json"
},
method: "POST",
timeout: 60000,
dataType: "json",
responseType: "text",
sslVerify: true,
withCredentials: false,
firstIpv4: false,
};
function baseRequest(
cog: fetchConfig = config,
extraConfig: AnyObject,
complete?: Function,
beforeRequest?: Function,
afterRequest?: Function,
): Promise<UniApp.GeneralCallbackResult | UniApp.RequestSuccessCallbackResult> {
let newConfig = { ...config, ...cog };
return new Promise(async (resolve, reject) => {
if (typeof beforeRequest === "function") {
let opts = await beforeRequest(newConfig, extraConfig);
let cb: UniApp.GeneralCallbackResult = { errMsg: "中止请求" };
if (!opts) {
return cb;
}
if (typeof opts !== "object") {
opts = {};
}
newConfig = { ...newConfig, ...opts };
}
let requestTask = uni.request({
url: newConfig.url || "",
data: newConfig.data,
header: newConfig.header,
method: newConfig.method,
timeout: newConfig.timeout,
dataType: newConfig.dataType,
responseType: newConfig.responseType,
sslVerify: newConfig.sslVerify,
withCredentials: newConfig.withCredentials,
firstIpv4: newConfig.firstIpv4,
async success(result) {
if (result.statusCode !== newConfig?.statusCode) {
reject(result);
return;
}
if (typeof afterRequest === "function") {
let opts = await afterRequest(result);
try {
if (typeof opts !== "object") {
opts = result;
}
if (typeof opts === "object" && Object.keys(opts)?.length == 0) {
opts = result;
}
} catch (e) {
console.error(e);
}
result = { ...opts };
}
resolve(result);
},
fail(result) {
reject(result);
},
complete(result) {
extraConfig.queryKey && requestMap.delete(extraConfig.queryKey)
if (typeof complete === "function") {
complete(result);
}
},
});
extraConfig.queryKey && requestMap.set(extraConfig.queryKey, requestTask)
});
}
export function abortRequestTask(obortList: any[] | 'All') {
if (obortList === 'All') {
for (let value of requestMap.values()) {
value.abort()
}
} else {
obortList.forEach((item: any) => {
requestMap.get(item)?.abort()
})
}
}
/**
* 请求
* @param cog 配置
* @param complete 访问结束后执行的函数
*/
export function fetchRequest(
cog: fetchConfig = config,
extraConfig:AnyObject,
beforeFun: Function,
afterFun?: Function,
complete?: Function,
) {
let newConfig = { ...config, ...cog };
return baseRequest(
newConfig,
extraConfig,
complete,
beforeFun || beforeRequest,
afterFun || afterRequest,
);
}
}
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
145
146
147
148
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
145
146
147
148
# 封装公共模块
// requset/index.ts
import { fetchRequest,fetchConfig } from "@/request/fetchRequest";
import useStore from "@/store";
import { storeToRefs } from "pinia";
export let baseUrl: string = import.meta.env.VITE_APP_API_BASE_URL;
type extraConfig = {
loading?: boolean;
cancel?: boolean; // 取消请求
queryKey?: any; // 请求id(用于取消请求)
};
const config: fetchConfig = {
header: {
"content-type": "application/json",
},
method: "POST",
timeout: 30000,
dataType: "json",
responseType: "text",
};
/**
* 请求拦截器
*
* 可以在请求前修改请求配置表,若返回 false 阻止本次请求
*/
function beforeRequestFun(
fetchConfig: fetchConfig,
extraConfig: extraConfig,
): fetchConfig | false {
const { loading = true, cancel } = extraConfig;
// const { fetchConfig, extraConfig } = myConfig;
const { useInfoStore } = useStore();
const { token } = storeToRefs(useInfoStore);
fetchConfig.url = baseUrl + fetchConfig.url;
// 请求头的添加逻辑
token.value &&
(fetchConfig.header = {
...fetchConfig.header,
Authorization: `Bearer ${token.value}`,
});
if (loading) {
uni.showLoading();
}
if (cancel) {
return false;
}
return fetchConfig;
}
// 请求成功后的回调。可以修改成功后返回的数据
function afterRequestFun(data: AnyObject) {}
// 无论请求是否成功都会执行的回调
function completeFun(data: AnyObject) {
uni.hideLoading();
}
/**
* complete 可选，为执行成功后的回调，相当于 finally，其实直接用 finally 也可以,这里只是保留了原生的 complete 能力。
*
* 无论 post 还是 get 请求统一传入 data:any 格式,不区分 body 传参还是 query 传参，已经做了封装。
*
* @param cog 请求配置表
* @param complete 执行后的回调
* @returns fetch 实例
*/
type ReqSuccess<T> = Omit<UniApp.RequestSuccessCallbackResult, "data"> & {
data: T;
};
export function request<T>(
cog: fetchConfig,
extraConfig: extraConfig={},
): Promise<ReqSuccess<T> {
let fetchConfig = { ...config, ...cog };
if (!extraConfig.queryKey) { extraConfig.queryKey = cog.url }
const fetch = fetchRequest(
fetchConfig,
extraConfig,
beforeRequestFun,
afterRequestFun,
completeFun,
) as any;
return fetch;
}
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
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
# 环境配置
.env.development
# 测试环境接口
NODE_ENV=development
VITE_APP_PREVIEW=true
VITE_APP_BASE=""
VITE_APP_API_BASE_URL=/test-api
1
2
3
4
5
2
3
4
5
.env.production
# 生产环境接口
NODE_ENV=production
VITE_APP_PREVIEW=true
VITE_APP_BASE="./"
VITE_APP_API_BASE_URL=https://xxx.com
1
2
3
4
5
2
3
4
5
vite 代理
import { defineConfig, loadEnv } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import vueJsx from "@vitejs/plugin-vue-jsx";
import { resolve } from "path";
// import Components from 'unplugin-vue-components/vite'
// https://vitejs.dev/config/
export default ({ mode }) => {
const env = loadEnv(mode, process.cwd());
return defineConfig({
// dts: true,
base: env.VITE_APP_BASE,
resolve: {
alias: [
{
find: "@",
replacement: resolve(__dirname, "src"),
},
],
},
css: {
preprocessorOptions: {
// 全局样式引入
scss: {
additionalData: '@import "./src/uni.scss";',
},
},
},
server: {
// 选项写法
proxy: {
"/test-api": {
// 测试接口
target: "https://XXX.com",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/test-api/, ""),
}
},
},
plugins: [uni(), vueJsx()],
});
};
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
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
# 接口定义
// requset/apis/index.ts
import { request } from "@/request/index";
interface api1Req{
name:string
age:number
}
export function api1(data:{name:string}) {
return request<api1Req>({
method: "GET",
url: "/test/api1",
data
},{
loading:false
});
}
export function api2(data: any) {
return request<any>({
method: "PUT",
url: "/test/api2",
data,
});
}
export function api3() {
return request<any>({
method: "POST",
url: "/test/api3",
});
}
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
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
# 接口使用
import {api1,api3} from "@/request/api/index";
api1({ name: "张三" }).then((res) => {
console.log(res);
});
api3().then((res) => {
console.log(res);
});
// 取消请求
abortRequestTask(["/test/api1", "/test/api2"]);
// 取消全部请求
abortRequestTask("All");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15