hooks封装常用请求
当前请求不包含表格分页,表格分页hook封装请看vue3 hooks封装表格请求。
一.源码
import { ref, unref, isRef } from "vue";
/** 额外参数
* immediate 声明函数时立即调用,默认不调用
* */
const _otherParams = {
immediate: false
}
/** 常用数据接口
* apiFn 后端接口请求方法
* params 搜索参数
* cd 调用接口后的回调
* otherParams 额外参数
* */
export function useApiSimple(apiFn, params, cb, otherParams = _otherParams) {
const loading = ref(false) // 数据加载状态
const data = ref(null) // 接口返回数据
const error = ref(null) // 报错信息
const res = ref(null) // 接口返回消息体
async function doFetch() {
// 重置数据
data.value = null
error.value = null
res.value = null
const paramsVal = unref(params)
try {
loading.value = true
res.value = await apiFn(paramsVal)
data.value = res.value?.data
loading.value = false
cb && cb()
console.log(res.value)
} catch (e) {
loading.value = false
error.value = await e
cb && cb()
console.log(e)
}
}
if (otherParams.immediate) {
// 参数是ref格式数据时,改变数据就会调用接口
if (isRef(params)) {
//此处可以加防抖,可参考表格hook封装方式
watchEffect(doFetch)
} else {
doFetch()
}
}
return {
data,
error,
loading,
res,
doFetch
}
}
二.如何使用
1.手动调用接口
import { useApiSimple } from "@/utils/hooks";
import { getSome} from "@/api/common";
// 提前生命搜索数据,数据发生变化时做重新赋值即可
const searchParams = {
id:'',
}
const {
loading,
res,
doFetch
} = useApiSimple(getSome, searchParams, searchCb)
function searchCb(){
// do some things
}
searchParams.id= 'dilireba'
// 手动调用接口
doFetch()
2.参数变化hooks自动调用后端接口
import { useApiSimple } from "@/utils/hooks";
import { getSome} from "@/api/common";
// 提前生命搜索数据,数据发生变化时做重新赋值即可
const searchParams = ref({
id:'',
})
const {
loading,
data
} = useApiSimple(getSome, searchParams, searchCb,{ immediate:true })
function searchCb(){
// do some things
}