Why did I choose to build wheels instead of VueUse?

💬 Foreword

Think about the experience of a React developer developing Vue. At the beginning of today tears to write more than a vue project, not turn, is to write more! The selection is vue3+vite development. Composition API gets me right into my element. react16 was selected for react development before. ahooks are the most hooks library I have access to, which fits my business very well. In the use of vue3 when the development time selected vueuse.

👨‍🏫 The question

Front-end development deals with requests the most. Most businesses are restful api architectures where we get the data to work with, and the current popular frameworks have state mechanisms to rerequest when dependencies change, etc. 'useFetch' and useAxios in vueuse are' hooks' as requests. useFetch is relatively simple, with only some basic functions of the request body. useAxios more based on the built-in functions of axios encapsulation, business dependency refresh, anti-buffeting, throttling, caching and other functions are not. Here is a small partner asked, then you in useAxiospackage these throttling anti-shaking function is good, not to mention the need for intrusive modification of the hook, it only supportaxios, in case the project becomesrequest?

🙋‍♂️ solved

ahooks are famous react hooks in the front end, which contain richer functions and can fit more of our business. useRequest can meet my needs, but there is no vue version. So I decided to develop a version of 'useRequest' based on vue3 features. It does everything ahooks do:

Automatic request/manual request
Polling
Anti-shake
throttling
Screen focus rerequest
Error retry
loading delay
SWR(stale-while-revalidate)
Cache
Plug-in

const {
loading: Ref<boolean>,
The data? : Ref<TData>,
The error? : Ref<Error>,
Params: Ref < TParams | | > [].
run: (...) params: TParams) => void,
runAsync: (... params: TParams) => Promise<TData>,
refresh: () => void,
refreshAsync: () => Promise<TData>, 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,
... Advanced features, see the documentation for more
}
);

This useRequest request body allows any promise object to be passed in, so it is not limited to axios or request, and the functionality is consistent. If we want to use some specific functionality of the request library, we can encapsulate those specific functionality into a plug-in called useRequest that can be controlled throughout its lifecycle. So it reflects both inclusiveness and acceptance of the specific functions of a single individual.

The use of plug-ins *


<template>
<div>{{ data? .name ?? '-' }}</div>
<div>{{ data? .age ??  '-' }}</div>
</template>
<script lang="ts" setup>
import { useRequest } from 'vue-hooks-plus'
import { Plugin } from '.. /.. /.. /types'
// plug-in
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>

The above implements a formatter return plug-in that overwrites the result of the request when the request is completed with a 'return {name: 'plugins update',age: 20,}'. See the documentation for more details.

Here is my Vue3 hooks library vue-hooks-plus based on ahooks, perfect test cases, high quality and reliable, gained a lot, the framework mechanism reflects the uniqueness of 🤩. In the future, I will share with you the principles in detail.