vue3 hooks封装常用请求

老客户!

已于 2023-05-18 18:58:21 修改

阅读量1.3k

点赞数 1

文章标签： vue.js 前端 javascript

于 2023-05-18 17:53:51 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43822182/article/details/130751784

版权

本文展示了如何在Vue3中使用自定义hooks封装简单的API请求，包括数据加载状态、错误处理和自动调用。示例代码详细解释了如何手动或在参数变化时自动触发接口请求，并提供了使用示例。

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

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
}