前言

想想一名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 ，感激反对。