封装$tryCatch方法（axios请求方法）,避免写重复代码

封装$tryCatch方法（axios请求方法）,避免写重复代码：https://blog.csdn.net/qq_41995320/article/details/122621498?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-122621498-blog-109624790.235%5Ev38%5Epc_relevant_default_base&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-122621498-blog-109624790.235%5Ev38%5Epc_relevant_default_base&utm_relevant_index=2

大家平时写axios请求的时候，重复代码快写吐了吧，类似下面这种。

下面是我封装的$tryCatch方法，可以自动抛出错误提示，自动加载loading。

import Vue from "vue";
// func 请求方法 | data 请求参数 | target 区域显示dom | useSuccMessage 使用成功提示
export function tryCatch(func, data, target, useSuccMessage = true) {
return new Promise(async (resolve, reject) => {
const loading = Vue.prototype.$loading({
lock: true,
target // 设置加载动画区域
})
try {
let res = await func(data)
if (res && res.header.returnCode === "0") {
if (useSuccMessage) {
Vue.prototype.$message({
message: res.header.msg,
type: "success",
});
}
resolve(res)
} else if (res.header.returnCode === "1") {
Vue.prototype.$message.error(res.header.msg);
reject(res)
}
} catch (err) {
loading.close()
reject(err)
} finally {
loading.close()
}
})
}
用之前在main.js中全局配置一下，这样在组件中就可以通过this.$tryCatch调用。

// tryCatch通用方法引入,全局配置
import { tryCatch } from '@/assets/js/ex-common.js'
Vue.prototype.$tryCatch = tryCatch;
用法如下：

methods: {
async handleSearch() {
let data = this.$refs.search.ruleForm;
try {
let res = await this.$tryCatch(findPage, data, this.$refs.smallTable.$el, false)
this.tableData = res.data.records;
this.total = res.data.total;
this.current = res.data.current
this.pages = res.data.pages
} catch (err) {
console.log(err)
}
}
},

解释：

注意：handleSearch方法调用的时候只能在mounted中调用，因为mounted钩子中才能获取到loading动画需要的dom元素。
————————————————
版权声明：本文为CSDN博主「jack-94」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41995320/article/details/122621498