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

开发 前端
初始化一个请求函数,然后根据初始参数,立即发送请求,返回请求结果,并且返回请求回调函数,方便我们根据新的参数再次调用。

🚀 立即请求函数

我们期望的场景是,

  • 初始化一个请求函数,然后根据初始参数,立即发送请求
  • 返回请求结果,并且返回请求回调函数,方便我们根据新的参数再次调用
  • 要求返回值包含加载中状态,错误信息以及正常的数据类型。

我的实现过程如下:

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

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

完整的签名如下

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

函数实现如下:

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

我们验证下

<script setup lang="ts">
import { reactive } from 'vue';
import { useFetch } from './hooks/index';

const fn = () => new Promise((resolve) => {
  setTimeout(()=> resolve({data: [], msg: '', code: 200}), 1000)
})

const [data, fetch] = useFetch<unknown, object>(fn, {})

</script>

<template>
  <h4>公众号:萌萌哒草头将军</h4>

  <!-- 加载中时用css禁用按钮 -->
  <button
    :style="{'pointer-events': data.loading ? 'none' : 'auto'}"
    @click="fetch({})"
  >{{ data.loading ? 'laoding...' : 'fetch' }}</button>
  
  <h1 v-if="data.loading">loading...</h1>
  <h1 v-else>{{data.value}}</h1>
</template>

fetch.giffetch.gif

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

🚀 手动请求函数

我们期望的场景是,

  • 初始化一个请求函数
  • 返回请求回调函数,方便我们调用
  • 要求返回值包含加载中状态,错误信息以及正常的数据类型

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

完整的签名如下

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

实现如下:

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

  const callback = (params: unknown): Promise<T> => 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]
}

验证如下:

<script setup lang="ts">
import { reactive } from 'vue';
import { useFetchFn } from './hooks/index';

const fn = () => new Promise((resolve) => {
  setTimeout(()=> resolve({data: [], msg: '', code: 200}), 1000)
})

const [data, fetch] = useFetchFn<unknown>(fn)

</script>

<template>
  <h4>公众号:萌萌哒草头将军</h4>

  <!-- 加载中时用css禁用按钮 -->
  <button
    :style="{'pointer-events': data.loading ? 'none' : 'auto'}"
    @click="fetch({})"
  >{{ data.loading ? 'laoding...' : 'fetch' }}</button>
  
  <h1 v-if="data.loading">loading...</h1>
  <h1 v-else>{{data.value}}</h1>
</template>

fetchfn.giffetchfn.gif

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

🚀 自动请求函数

我们期望的场景是,

  • 初始化一个请求函数,然后根据初始参数,立即发送请求
  • 当参数发生变化时,自动根据最新参数发送请求
  • 要求返回值包含加载中状态,错误信息以及正常的数据类型。

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

完整的签名如下

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

实现如下:

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

  const callback = (params: Params): Promise<T> => 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
}

我们验证下功能

<script setup lang="ts">
import { reactive, watch } from 'vue';
import { useAutoFetch } from './hooks/index';

const fn = () => new Promise((resolve) => {
  setTimeout(()=> resolve({data: [], msg: '', code: 200}), 1000)
})

const params = reactive({
  age: 9
})

const data = useAutoFetch<unknown, object>(fn, params)

watch(params, () => console.log(params))

</script>

<template>
  <h4>公众号:萌萌哒草头将军</h4>
  
  <div>{{ params.age }}</div>
  <!-- 加载中时用css禁用按钮 -->
  <button
    :style="{'pointer-events': data.loading ? 'none' : 'auto'}"
    @click="() => params.age++"
  >{{ data.loading ? 'laoding...' : 'change params' }}</button>
  
  <h1 v-if="data.loading">loading...</h1>
  <h1 v-else>{{data.value}}</h1>
</template>

auto.gifauto.gif

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

责任编辑:武晓燕 来源: 萌萌哒草头将军
相关推荐

2020-07-22 15:15:28

Vue前端代码

2024-11-06 10:16:22

2022-09-06 12:20:30

Vue3CVCRUD

2011-08-16 15:06:43

IOS开发异步请求

2022-07-06 07:42:14

DOMHook标签

2023-03-15 15:54:36

Java代码

2022-08-28 10:08:53

前端代码前端

2022-06-13 08:39:21

Vue3API

2024-05-30 11:44:37

2024-08-13 09:26:07

2022-06-07 08:59:58

hookuseRequestReact 项目

2023-09-27 07:49:23

2022-12-19 14:53:07

模型训练

2022-07-20 09:06:27

Hook封装工具库

2024-04-02 08:50:08

Go语言react

2021-05-18 07:51:37

Suspense组件Vue3

2024-07-10 08:39:49

2021-12-01 08:11:44

Vue3 插件Vue应用

2024-03-13 08:37:18

Vue3Suspense异步组件

2022-07-03 23:26:38

DOMHook封装
点赞
收藏

51CTO技术栈公众号