关于react.js:浅谈我为什么不使用VueUse而选择造轮子

💬 前言

想想一名 React 开发开发 Vue 是什么体验。就在明天初含泪写多一个 vue 我的项目，不是转，是写多！选用的是 vue3+vite 开发。Composition API 让我得心应手。之前 react 开发选的是 react16，ahooks是我接触最多的 hooks 库了，很贴合我的业务。在应用 vue3 的时候开发的时候选取了 vueuse。

👨‍🏫 问题

在前端开发中和申请打交道是最多的，大多数业务都是 restful api 架构，咱们拿到数据做解决，以后风行的框架装备着状态机制，在依赖变动时进行从新申请等。vueuse 中的 useFetch 和 useAxios 是作为申请的 hook。useFetch 性能比拟繁多，只有申请体的一些基本功能。useAxios 更多基于 axios 内置性能的封装，业务中的依赖刷新，防抖，节流，缓存等性能都没有的。这里就有小伙伴问了，那你在 useAxios上封装这些节流防抖性能就好了，先不说须要侵入式的批改这个钩子，它仅反对 axios，万一我的项目变成request 呢?

🙋‍♂️ 解决

ahooks 是基于 vueuse 的思维封装的 react 的 hooks，它含有更加丰盛的性能，能贴合咱们更多的业务，其中的 useRequest 是满足我的需要的，但苦于没有 vue 版本，于是我感觉本人开发一版基于 vue3 个性的useRequest。它具备了 ahooks 的所有性能：

• 主动申请 / 手动申请
• 轮询
• 防抖
• 节流
• 屏幕聚焦从新申请
• 谬误重试
• loading delay
• SWR(stale-while-revalidate)
• 缓存
• 插件式

const {
  loading: Ref<boolean>,
  data?: Ref<TData>,
  error?: Ref<Error>,
  params: Ref<TParams || []>,
  run: (...params: TParams) => void,
  runAsync: (...params: TParams) => Promise<TData>,
  refresh: () => void,
  refreshAsync: () => Promise<TData>,
  mutate: (data?: TData | ((oldData?: TData) => (TData | undefined))) => void,
  cancel: () => void,} = useRequest<TData, TParams>(service: (...args: TParams) => Promise<TData>,
  {
    manual?: boolean,
    defaultParams?: TParams,
    onBefore?: (params: TParams) => void,
    onSuccess?: (data: TData, params: TParams) => void,
    onError?: (e: Error, params: TParams) => void,
    onFinally?: (params: TParams, data?: TData, e?: Error) => void,
    ... 高级性能，更多请见文档
  }
);

这个 useRequest 申请体容许传入任意 promise 对象，所以它并不限度是 axios 还是 request, 并且性能都是统一的。如果想应用申请库的一些特定性能，咱们能够封装那些特定性能成为useRequest 的插件，能够管制在它的生命周期中调用。所以它既体现出包容性又体现出对于单个个体非凡性能的接收。

插件化的应用

<template>
  <div>{{data?.name ?? '-'}}</div>
  <div>{{data?.age ?? '-'}}</div>
</template>
<script lang="ts" setup>
import {useRequest} from 'vue-hooks-plus'
import {Plugin} from '../../../types'
// 插件
const useFormatter: Plugin<
  {
    name: string
    age: number
  },
  []
> = (fetchInstance, { formatter}) => {
  return {onSuccess: () => {fetchInstance.setData(formatter(fetchInstance.state.data), 'data')
    },
  }
}
function getUsername(): Promise<{ name: string; age: number}> {return new Promise((resolve, reject) => {setTimeout(() => {
      resolve({
        name: 'yong_git',
        age: 18,
      })
    }, 1000)
  })
}
const {data} = useRequest(() => getUsername(),
  {formatter: () => {
      return {
        name: 'plugins update',
        age: 20,
      }
    },
  },
  [useFormatter]
)
</script>

下面实现了一个 formatter 返回后果的插件，它在申请实现的时候return {name: 'plugins update',age: 20,} 笼罩了申请的后果，更多详情请见文档。

上面是我基于 ahooks 实现的 vue 的 hooks 库 vue-hooks-plus，播种很多，框架的机制所体现进去的独特性让人眼前一亮 🤩。后续还会挑重点 hooks 具体解说原理和大家分享。

更多

文档地址

GitHub 地址

大家 star star 🌟🌟，感激反对。