文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue3使用hook封装常见的几种异步请求函数场景,让开发更丝滑

2024-11-30 11:51

关注

我的实现过程如下:

定义具体的数据返回值签名

interface Fetch {
  loading: boolean,
  value?: T, // 具体的返回类型是泛型
  error?: string
}

完整的签名如下

export declare function useFetch (
  fn: (args: Params) => Promise,
  initParams: Params  
): [Fetch, (params: Params) => Promise]

函数实现如下:

export const useFetch = (
  fn: (args: Params) => Promise,
  initParams: Params  
): [Fetch, (params: Params) => Promise] => {
  
  // 定义基础的数据格式
  const data = reactive>({
    loading: true,
    value: undefined,
    error: undefined
  }) as Fetch // 这里会报错:T类型无法赋值给UnwrapRef类型
  // 我不懂为啥,UnwrapRef是vue的深层响应式类型的声明
  // 这里导致我无法默认的类型赋值,不符合直觉,可能是我ts太菜了
  // 懂的大佬评论区带带我吧
  
  // 定义请求回调
  const callback = (params: Params): Promise => new Promise((resolve, reject) => {
    data.loading = true
    fn(params)
      .then(result => {
        data.value = result as any
        resolve(result)
      })
      .catch(error => {
        data.error = error
        reject(error)
      })
      .finally(() => data.loading = false)
  })

  // 立即执行
  watchSyncEffect(() => {
    callback(initParams)
  })

  return [data, callback]
}

我们验证下



fetch.gif

页面刷新后立即发出请求了!

🚀 手动请求函数

我们期望的场景是,

这个的实现和上面类似,我们不需要初始参数和类型,也不用立即执行,

完整的签名如下

export declare function useFetch (
  fn: (args: unknown) => Promise
): [Fetch, (params: unknown) => Promise]

实现如下:

export const useFetchFn = (
  fn: (args: unknown) => Promise
): [Fetch, (params: unknown) => Promise] => {
  
  const data = reactive>({
    loading: false, // 默认为false
    value: undefined,
    error: undefined
  }) as Fetch

  const callback = (params: unknown): Promise => new Promise((resolve, reject) => {
    data.loading = true
    fn(params)
      .then(result => {
        data.value = result as any
        resolve(result)
      })
      .catch(error => {
        data.error = error
        reject(error)
      })
      .finally(() => data.loading = false)
  })

  return [data, callback]
}

验证如下:



fetchfn.gif

页面刷新后没有发出请求,点击按钮之后才发出请求!

🚀 自动请求函数

我们期望的场景是,

这个的实现和立即请求函数类似,只需要监听参数的变化,

完整的签名如下

export declare function useFetch (
  fn: (args: Params) => Promise,
  initParams: Params  
): Fetch

实现如下:

export const useAutoFetch = (
  fn: (args: Params) => Promise,
  initParams: Params  
): Fetch => {
  
  const data = reactive>({
    loading: true,
    value: undefined,
    error: undefined
  }) as Fetch

  const callback = (params: Params): Promise => new Promise((resolve, reject) => {
    data.loading = true
    fn(params)
      .then(result => {
        data.value = result as any
        resolve(result)
      })
      .catch(error => {
        data.error = error
        reject(error)
      })
      .finally(() => data.loading = false)
  })

  // 如果不需要立即执行,可没有这步
  const effects = watchSyncEffect(() => {
    callback(initParams)
  })

  // 自动监听参数变化
  const effects = watch([initParams], () => callback(initParams))
  // 卸载页面时,关闭监听
  onUnmounted(() => effects())

  return data
}

我们验证下功能



auto.gif

每次当我们改变参数时自动发送请求。

来源:萌萌哒草头将军内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯