Skip to content

V
vipSupplier
Commit 64eecc09 by 初志鑫
Options

重构axios与多彩loading，常规loading封装逻辑

parent e2e8506c
Showing with 112 additions and 116 deletions
.vscode/settings.json
...@@ -46,5 +46,10 @@ ...@@ -46,5 +46,10 @@
}, },
"editor.suggest.snippetsPreventQuickSuggestions": false, "editor.suggest.snippetsPreventQuickSuggestions": false,
"prettier.htmlWhitespaceSensitivity": "ignore", "prettier.htmlWhitespaceSensitivity": "ignore",
"prettier.vueIndentScriptAndStyle": true "prettier.vueIndentScriptAndStyle": true,
"docthis.authorName": "chuzhixin 1204505056@qq.com",
"docthis.includeAuthorTag": true,
"docthis.includeDescriptionTag": true,
"docthis.enableHungarianNotationEvaluation": true,
"docthis.inferTypesFromNames": true
} }
mock/controller/changeLog.js
...@@ -162,13 +162,17 @@ const data = [ ...@@ -162,13 +162,17 @@ const data = [
content: "全局axios请求全面支持Status Code拦截处理", content: "全局axios请求全面支持Status Code拦截处理",
timestamp: "2020-07-29", timestamp: "2020-07-29",
}, },
{
content: "重构全局loadding加载代码",
timestamp: "2020-07-31",
},
]; ];
export default [ export default [
{ {
url: "/changeLog/getList", url: "/changeLog/getList",
type: "post", type: "post",
response(config) { response() {
return { return {
code: 200, code: 200,
msg: "success", msg: "success",
......
package.json
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
"jsencrypt": "^3.0.0-rc.1", "jsencrypt": "^3.0.0-rc.1",
"jsonlint": "^1.6.3", "jsonlint": "^1.6.3",
"lodash": "^4.17.19", "lodash": "^4.17.19",
"maptalks": "^0.47.5", "maptalks": "^0.48.0",
"mapv": "^2.0.56", "mapv": "^2.0.56",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"qs": "^6.9.4", "qs": "^6.9.4",
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
"@vue/cli-plugin-vuex": "^4.4.6", "@vue/cli-plugin-vuex": "^4.4.6",
"@vue/cli-service": "^4.4.6", "@vue/cli-service": "^4.4.6",
"@vue/eslint-config-prettier": "^6.0.0", "@vue/eslint-config-prettier": "^6.0.0",
"autoprefixer": "^9.8.5", "autoprefixer": "^9.8.6",
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",
"compression-webpack-plugin": "^4.0.0", "compression-webpack-plugin": "^4.0.0",
"eslint": "^7.5.0", "eslint": "^7.5.0",
......
src/layouts/components/index.js
...@@ -2,20 +2,20 @@ ...@@ -2,20 +2,20 @@
* @copyright chuzhixin 1204505056@qq.com * @copyright chuzhixin 1204505056@qq.com
* @description 公共布局导出，已封装成npm，便于此后在线升级，当然也存在一定的弊端，给开发者自定义增加了一定的困难，如果您一定要进行高度自定义，请仔细阅读VIP群文档，layouts本地化篇 * @description 公共布局导出，已封装成npm，便于此后在线升级，当然也存在一定的弊端，给开发者自定义增加了一定的困难，如果您一定要进行高度自定义，请仔细阅读VIP群文档，layouts本地化篇
*/ */
export { default as ColorfullIcon } from "zx-layouts/ColorfullIcon"; export { default as ColorfullIcon } from "./zx-layouts/ColorfullIcon";
export { default as RemixIcon } from "zx-layouts/RemixIcon"; export { default as RemixIcon } from "./zx-layouts/RemixIcon";
export { default as VabDrag } from "zx-layouts/Drag"; export { default as VabDrag } from "./zx-layouts/Drag";
export { default as VabPermissions } from "zx-layouts/Permissions"; export { default as VabPermissions } from "./zx-layouts/Permissions";
export { default as VabQueryForm } from "zx-layouts/VabQueryForm/export"; export { default as VabQueryForm } from "./zx-layouts/VabQueryForm/export";
export { default as Logo } from "zx-layouts/Logo"; export { default as Logo } from "./zx-layouts/Logo";
export { default as Avatar } from "zx-layouts/Avatar"; export { default as Avatar } from "./zx-layouts/Avatar";
export { default as Ad } from "./Ad"; export { default as Ad } from "./Ad";
export { default as AppMain } from "zx-layouts/AppMain"; export { default as AppMain } from "./zx-layouts/AppMain";
export { default as TagsBar } from "zx-layouts/TagsBar"; export { default as TagsBar } from "./zx-layouts/TagsBar";
export { default as SideBar } from "zx-layouts/SideBar"; export { default as SideBar } from "./zx-layouts/SideBar";
export { default as Breadcrumb } from "zx-layouts/Breadcrumb"; export { default as Breadcrumb } from "./zx-layouts/Breadcrumb";
export { default as FullScreenBar } from "zx-layouts/FullScreenBar"; export { default as FullScreenBar } from "./zx-layouts/FullScreenBar";
export { default as ErrorLog } from "zx-layouts/ErrorLog"; export { default as ErrorLog } from "./zx-layouts/ErrorLog";
export { default as ThemeBar } from "zx-layouts/ThemeBar"; export { default as ThemeBar } from "./zx-layouts/ThemeBar";
export { default as TopBar } from "zx-layouts/TopBar"; export { default as TopBar } from "./zx-layouts/TopBar";
export { default as NavBar } from "zx-layouts/NavBar"; export { default as NavBar } from "./zx-layouts/NavBar";
src/utils/request.js
import Vue from "vue";
import axios from "axios"; import axios from "axios";
import { import {
baseURL, baseURL,
contentType, contentType,
debounce,
invalidCode, invalidCode,
messageDuration,
noPermissionCode, noPermissionCode,
requestTimeout, requestTimeout,
successCode, successCode,
tokenName, tokenName,
debounce,
} from "@/config/settings"; } from "@/config/settings";
import { Loading, Message } from "element-ui";
import store from "@/store"; import store from "@/store";
import qs from "qs"; import qs from "qs";
import router from "@/router"; import router from "@/router";
import _ from "lodash";
import { isArray } from "@/utils/validate"; import { isArray } from "@/utils/validate";
const service = axios.create({ let loadingInstance;
/**
* @copyright chuzhixin 1204505056@qq.com
* @description 判断当前url是否需要加loading
* @param {*} config
* @returns
*/
const needLoading = (config) => {
let status = false;
debounce.forEach((item) => {
if (Vue.prototype.$baseLodash.includes(config.url, item)) {
status = true;
}
});
return status;
};
/**
* @copyright chuzhixin 1204505056@qq.com
* @description 处理code异常
* @param {*} code
* @param {*} msg
*/
const handleCode = (code, msg) => {
switch (code) {
case invalidCode:
Vue.prototype.$baseMessage(msg || `后端接口${code}异常`, "error");
store.dispatch("user/resetAccessToken").catch(() => {});
break;
case noPermissionCode:
router.push({ path: "/401" }).catch(() => {});
break;
default:
Vue.prototype.$baseMessage(msg || `后端接口${code}异常`, "error");
break;
}
};
const instance = axios.create({
baseURL, baseURL,
timeout: requestTimeout, timeout: requestTimeout,
headers: { headers: {
"Content-Type": contentType, "Content-Type": contentType,
}, },
}); });
let loadingInstance;
service.interceptors.request.use( instance.interceptors.request.use(
(config) => { (config) => {
if (store.getters["user/accessToken"]) { if (store.getters["user/accessToken"]) {
config.headers[tokenName] = store.getters["user/accessToken"]; config.headers[tokenName] = store.getters["user/accessToken"];
} }
if (config.data) {
//这里会过滤所有为空、0、false的key，如果不需要请自行注释 //这里会过滤所有为空、0、false的key，如果不需要请自行注释
config.data = _.pickBy(config.data, _.identity); if (config.data)
} config.data = Vue.prototype.$baseLodash.pickBy(
if (process.env.NODE_ENV !== "preview") { config.data,
if (contentType === "application/x-www-form-urlencoded;charset=UTF-8") { Vue.prototype.$baseLodash.identity
if (config.data) { );
if (
process.env.NODE_ENV !== "preview" &&
contentType === "application/x-www-form-urlencoded;charset=UTF-8" &&
config.data
) {
config.data = qs.stringify(config.data); config.data = qs.stringify(config.data);
} }
}
}
const needLoading = () => {
let status = false;
debounce.forEach((item) => {
if (_.includes(config.url, item)) {
status = true;
}
});
return status;
};
if (needLoading()) {
loadingInstance = Loading.service();
}
if (needLoading(config)) {
loadingInstance = Vue.prototype.$baseLoading();
}
return config; return config;
}, },
(error) => { (error) => {
...@@ -61,41 +92,21 @@ service.interceptors.request.use( ...@@ -61,41 +92,21 @@ service.interceptors.request.use(
} }
); );
const errorMsg = (message) => { instance.interceptors.response.use(
return Message({
message: message,
type: "error",
duration: messageDuration,
});
};
service.interceptors.response.use(
(response) => { (response) => {
if (loadingInstance) { if (loadingInstance) loadingInstance.close();
loadingInstance.close();
}
const { status, data, config } = response; const { status, data, config } = response;
const { code, msg } = data; const { code, msg } = data;
// 操作正常Code数组 // 操作正常Code数组
let codeVerificationArray = isArray(successCode) const codeVerificationArray = isArray(successCode)
? [...successCode] ? [...successCode]
: [...[successCode]]; : [...[successCode]];
// 是否操作正常 // 是否操作正常
if (codeVerificationArray.includes(code)) { if (codeVerificationArray.includes(code)) {
return data; return data;
} else { } else {
switch (code) { handleCode(code, msg);
case invalidCode:
errorMsg(msg || `后端接口${code}异常`);
store.dispatch("user/resetAccessToken").catch(() => {});
break;
case noPermissionCode:
router.push({ path: "/401" }).catch(() => {});
break;
default:
errorMsg(msg || `后端接口${code}异常`);
break;
}
return Promise.reject( return Promise.reject(
"vue-admin-beautiful请求异常拦截:" + "vue-admin-beautiful请求异常拦截:" +
JSON.stringify({ url: config.url, code, msg }) || "Error" JSON.stringify({ url: config.url, code, msg }) || "Error"
...@@ -103,26 +114,14 @@ service.interceptors.response.use( ...@@ -103,26 +114,14 @@ service.interceptors.response.use(
} }
}, },
(error) => { (error) => {
if (loadingInstance) { if (loadingInstance) loadingInstance.close();
loadingInstance.close(); const { response, message } = error;
} if (error.response && error.response.data) {
/*网络连接过程异常处理*/ const { status, data } = response;
let { message } = error; handleCode(status, data.msg || message);
if (message === "Network Error") {
message = "后端接口连接异常";
}
if (message.includes("timeout")) {
message = "后端接口请求超时";
}
if (message.includes("Request failed with status code")) {
message = "后端接口" + message.substr(message.length - 3) + "异常";
}
if (error.response) {
const { data } = error.response;
message = data.msg;
}
errorMsg(message || "后端接口未知异常");
return Promise.reject(error); return Promise.reject(error);
} }
}
); );
export default service;
export default instance;
src/utils/vab.js
...@@ -17,7 +17,7 @@ const install = (Vue, opts = {}) => { ...@@ -17,7 +17,7 @@ const install = (Vue, opts = {}) => {
return title; return title;
})(); })();
/* 全局加载层 */ /* 全局加载层 */
Vue.prototype.$baseLoading = (index, text, callback) => { Vue.prototype.$baseLoading = (index, text) => {
let loading; let loading;
if (!index) { if (!index) {
loading = Loading.service({ loading = Loading.service({
...@@ -33,16 +33,10 @@ const install = (Vue, opts = {}) => { ...@@ -33,16 +33,10 @@ const install = (Vue, opts = {}) => {
background: "hsla(0,0%,100%,.8)", background: "hsla(0,0%,100%,.8)",
}); });
} }
if (callback) { return loading;
callback(loading);
} else {
setTimeout(() => {
loading.close();
}, messageDuration);
}
}; };
/* 全局多彩加载层 */ /* 全局多彩加载层 */
Vue.prototype.$baseColorfullLoading = (index, text, callback) => { Vue.prototype.$baseColorfullLoading = (index, text) => {
let loading; let loading;
if (!index) { if (!index) {
loading = Loading.service({ loading = Loading.service({
...@@ -73,13 +67,7 @@ const install = (Vue, opts = {}) => { ...@@ -73,13 +67,7 @@ const install = (Vue, opts = {}) => {
background: "hsla(0,0%,100%,.8)", background: "hsla(0,0%,100%,.8)",
}); });
} }
if (callback) { return loading;
callback(loading);
} else {
setTimeout(() => {
loading.close();
}, messageDuration);
}
}; };
/* 全局Message */ /* 全局Message */
Vue.prototype.$baseMessage = (message, type) => { Vue.prototype.$baseMessage = (message, type) => {
......
src/views/vab/loading/index.vue
...@@ -11,9 +11,6 @@ ...@@ -11,9 +11,6 @@
<el-button type="primary" @click="handleLoading(7)">效果7</el-button> <el-button type="primary" @click="handleLoading(7)">效果7</el-button>
<el-button type="primary" @click="handleLoading(8)">效果8</el-button> <el-button type="primary" @click="handleLoading(8)">效果8</el-button>
<el-button type="primary" @click="handleLoading(9)">效果9</el-button> <el-button type="primary" @click="handleLoading(9)">效果9</el-button>
<el-button type="primary" @click="test()">
全局默认骨架屏(仿支付宝)
</el-button>
<br /> <br />
<br /> <br />
<br /> <br />
...@@ -41,13 +38,16 @@ ...@@ -41,13 +38,16 @@
}, },
methods: { methods: {
handleLoading(index) { handleLoading(index) {
this.$baseLoading(index); const Loading = this.$baseLoading(index);
setTimeout(() => {
Loading.close();
}, 3000);
}, },
handleColorfullLoading(index) { handleColorfullLoading(index) {
this.$baseColorfullLoading(index); const Loading = this.$baseColorfullLoading(index);
}, setTimeout(() => {
test() { Loading.close();
location.reload(); }, 3000);
}, },
}, },
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment