vue3 hooks封装表格请求

文章介绍了在Vue中如何使用hooks封装表格数据的请求,包括处理分页、错误处理、动态参数以及使用useDebounceFn进行延迟调用,以优化接口请求。示例展示了两种使用方式,一种是手动调用接口并处理参数变化,另一种是通过hooks自动监听参数变化触发请求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

hooks封装表格请求

当前请求主要应用与表格筛选

一.源码

import { isRef, ref, unref, reactive, computed, onMounted, watch } from 'vue'
import { useDebounceFn } from '@vueuse/core'

/** 额外参数
 * isAsync 是否页面主进程渲染完才执行
 * customPagination 自定义分页初始数据(分页数据只有初始化才能指定其他时间都是函数内部自己控制)
 * */
const _otherParams = { isAsync: false, customPagination: { pageSize: 10 } }

/** 表格数据接口
 *  apiFn 后端接口请求方法
 *  params 搜索参数,(分页参数需要加到otherParams内)
 *  otherParams 额外参数
 * */
export function useApiTable (apiFn, params, otherParams = _otherParams) {
  const loading = ref(false)
  const data = reactive({
    content: [],
    total: 0,
    page: 1,
    pageSize: otherParams.customPagination.pageSize || 10
  })
  const error = ref(null)
  const res = ref(null)

  const pagination = computed(() => ({
    total: data.total,
    pageSize: data.pageSize,
    current: data.page
  }))
  // 分页切换|刷新数据
  function changePagination (page, pageSize) {
    const _params = {
      page: page || 1,
      pageSize: pageSize || otherParams.customPagination.pageSize || 10
    }
    // 手动修改当前页码
    data.pageSize = _params.pageSize
    data.page = _params.page
    if (isRef(params)) {
      doFetch(_params)
    } else {
      params = Object.assign({}, params, _params)
      doFetch()
    }
  }

  // 修改参数
  function changeParams (pas) {
    if (isRef(params)) {
      params.value = pas
    } else {
      params = pas
      doFetch()
    }
  }

  async function doFetch (pageParams) {
    // 重置数据
    error.value = null
    let paramsVal = {}
    // 分页数据需要函数单独处理,不可从外部传入,此次单独处理分页参数
    if (!pageParams) {
      paramsVal = { ...unref(params), page: 1, pageSize: otherParams.customPagination.pageSize || 10 }
    } else {
      paramsVal = { ...unref(params), ...pageParams }
    }

    try {
      loading.value = true
      res.value = await apiFn(paramsVal)
      const _data = await res.value?.data
      data.content = _data?.content
      data.total = _data?.total
      data.page = _data?.pageNumber
      data.pageSize = _data?.pageSize
      loading.value = false
      // console.log(_data)
    } catch (e) {
      loading.value = false
      error.value = e
      console.log(e)
    }
  }
  onMounted(() => {
    if (otherParams.isAsync) {
      setTimeout(() => {
        initData()
      })
    } else {
      initData()
    }
  })
  const debouncedFn = useDebounceFn(() => {
    doFetch()
  }, 1000)
  function initData () {
    if (isRef(params)) {
      watch(params, () => debouncedFn(), { immediate: true, deep: true })
    } else {
      doFetch()
    }
  }

  return {
    data,
    error,
    pagination,
    loading,
    res,
    changePagination,
    doFetch,
    changeParams
  }
}

二.如何使用

1.手动调用接口(参数变化时要主动修改分页数据)

const searchParams = {
  id:'',
}
 const {
    loading,
    data,
    pagination,
    changePagination,
    changeParams
  } = useApiTable(getSome, searchParams)
	// 参数变化时调用 changeParams函数

2.参数变化hooks自动调用后端接口

import { useApiTable } from "@/utils/hooks/useApiTable"
import { getSome} from "@/api/common";
 const searchParams = ref({
   id:''
  })
 const {
    loading,
    data,
    pagination,
    changePagination
  } = useApiTable(getSome, searchParams)
  // 需要手动刷新表格数据时使用,changePagination函数即可
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值