我就废话不多说了，大家还是直接看代码吧~
|
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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
|
import axios from "axios";
import baseUrl from "../../setBaseUrl";
axios.defaults.baseURL = baseUrl;
import { Loading, Message } from "element-ui";
const loadingOptions = {
lock: true,
text: "拼命加载中",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)"
};
if (localStorage.token) {
axios.defaults.headers.common["x-token"] = localStorage.token;
}
const Http = {
get: function(url: string, data: any, isLoading: boolean) {
if (localStorage.token) {
axios.defaults.headers.common["x-token"] = localStorage.token;
}
let loading: any;
if (isLoading) {
loading = Loading.service(loadingOptions);
}
return new Promise<any>((resolve, reject) => {
axios
.get(url, { params: data })
.then(function(res) {
if (isLoading) {
loading.close();
}
if (res.data.code === 200) {
resolve(res.data.data);
} else {
// console.warn("Http error Info ===> ", res.data);
reject(res.data.message);
}
})
.catch(function(err) {
if (isLoading) {
loading.close();
}
// console.warn("Http error Info ===> ", err);
Message({
message: err.message,
type: "error",
duration: 2500,
showClose: true
});
});
}).catch(function(err) {
Message({
message: err,
type: "error",
duration: 2500,
showClose: true
});
});
},
post: function(url: string, data: any, isLoading: boolean) {
if (localStorage.token) {
axios.defaults.headers.common["x-token"] = localStorage.token;
}
let loading: any;
if (isLoading) {
loading = Loading.service(loadingOptions);
}
return new Promise<any>((resolve, reject) => {
axios
.post(url, data)
.then(function(res) {
if (isLoading) {
loading.close();
}
if (res.data.code === 200) {
resolve(res.data.data);
} else {
reject(res.data.message);
}
})
.catch(function(err) {
if (isLoading) {
loading.close();
}
// console.warn("Http error Info===>", err);
Message({
message: err.message,
type: "error",
duration: 2500,
showClose: true
});
});
}).catch(function(err) {
Message({
message: err,
type: "error",
duration: 2500,
showClose: true
});
});
},
put: function(url: string, data: any, isLoading: boolean) {
if (localStorage.token) {
axios.defaults.headers.common["x-token"] = localStorage.token;
}
let loading: any;
if (isLoading) {
loading = Loading.service(loadingOptions);
}
return new Promise<any>((resolve, reject) => {
axios
.put(url, data)
.then(function(res) {
if (isLoading) {
loading.close();
}
if (res.data.code === 200) {
resolve(res.data.data);
} else {
reject(res.data.message);
}
})
.catch(function(err) {
if (isLoading) {
loading.close();
}
// console.warn("Http error Info===>", err);
Message({
message: err.message,
type: "error",
duration: 2500,
showClose: true
});
});
}).catch(function(err) {
Message({
message: err,
type: "error",
duration: 2500,
showClose: true
});
});
},
delete: function(url: string, data: any, isLoading: boolean) {
if (localStorage.token) {
axios.defaults.headers.common["x-token"] = localStorage.token;
}
let loading: any;
if (isLoading) {
loading = Loading.service(loadingOptions);
}
return new Promise<any>((resolve, reject) => {
axios
.delete(url, data)
.then(function(res) {
if (isLoading) {
loading.close();
}
if (res.data.code === 200) {
resolve(res.data.data);
} else {
reject(res.data.message);
}
})
.catch(function(err) {
if (isLoading) {
loading.close();
}
// console.warn("Http error Info===>", err);
Message({
message: err.message,
type: "error",
duration: 2500,
showClose: true
});
});
}).catch(function(err) {
Message({
message: err,
type: "error",
duration: 2500,
showClose: true
});
});
}
};
export default Http;
|
补充知识：vuex刷新页面是store被更新，如何解决数据备份？
我用的方法很简单，在App.vue中的生命周期函数created中，监听页面刷新，在页面刷新的时候，将store的数据及时存储在sessionStorage中，然后刷新完毕后就可以将sessionStorage中的数据再取出来用
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
created () { //页面刷新store数据备份
if (localStorage.cmstoken) {
this.$router.replace("/data");
}else {
this.$router.replace("/");
}
if (sessionStorage.getItem("store") ) { //在页面加载时读取sessionStorage里的状态信息
this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
}
window.addEventListener("beforeunload",()=>{ //在页面刷新时将vuex里的信息保存到sessionStorage里
sessionStorage.setItem("store",JSON.stringify(this.$store.state))
})
},
|
以上这篇封装 axios+promise通用请求函数操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/qq_30604453/article/details/85159746