?? 前言

想想一名React開(kāi)發(fā)開(kāi)發(fā)Vue是什么體驗(yàn)。就在今天初含淚寫(xiě)多一個(gè)vue項(xiàng)目，不是轉(zhuǎn)，是寫(xiě)多！選用的是vue3+vite開(kāi)發(fā)。Composition API 讓我得心應(yīng)手。

之前react開(kāi)發(fā)選的是react16，ahooks是我接觸最多的hooks庫(kù)了，很貼合我的業(yè)務(wù)。在使用vue3的時(shí)候開(kāi)發(fā)的時(shí)候選取了 vueuse 。

??‍?? 問(wèn)題

在前端開(kāi)發(fā)中和請(qǐng)求打交道是最多的，大多數(shù)業(yè)務(wù)都是restful api架構(gòu)，我們拿到數(shù)據(jù)做處理，當(dāng)前流行的框架配備著狀態(tài)機(jī)制，在依賴變化時(shí)進(jìn)行重新請(qǐng)求等。 vueuse 中的 useFetch 和 useAxios 是作為請(qǐng)求的 hook。

useFetch功能比較單一，只有請(qǐng)求體的一些基本功能。useAxios 更多基于axios內(nèi)置功能的封裝，業(yè)務(wù)中的依賴刷新，防抖，節(jié)流，緩存等功能都沒(méi)有的。

這里就有小伙伴問(wèn)了，那你在 useAxios上封裝這些節(jié)流防抖功能就好了，先不說(shuō)需要侵入式的修改這個(gè)鉤子，它僅支持axios，萬(wàn)一項(xiàng)目變成request呢?

??‍♂? 解決

ahooks 是前端界大名鼎鼎的 react 的 hooks，它含有更加豐富的功能，能貼合我們更多的業(yè)務(wù)，其中的 useRequest 是滿足我的需求的，但苦于沒(méi)有vue版本，于是我覺(jué)得自己開(kāi)發(fā)一版基于vue3特性的useRequest 。它具備了ahooks的所有功能：

• 自動(dòng)請(qǐng)求/手動(dòng)請(qǐng)求
• 輪詢
• 防抖
• 節(jié)流
• 屏幕聚焦重新請(qǐng)求
• 錯(cuò)誤重試
• 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,
 ? ?...高級(jí)功能，更多請(qǐng)見(jiàn)文檔
  }
);

這個(gè)useRequest 請(qǐng)求體允許傳入任意promise對(duì)象，所以它并不限制是axios還是request,并且功能都是一致的。

如果想使用請(qǐng)求庫(kù)的一些特定功能，我們可以封裝那些特定功能成為useRequest的插件，可以控制在它的生命周期中調(diào)用。

所以它既體現(xiàn)出包容性又體現(xiàn)出對(duì)于單個(gè)個(gè)體特殊功能的接納。

插件化的使用

<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>

上面實(shí)現(xiàn)了一個(gè)formatter返回結(jié)果的插件，它在請(qǐng)求完成的時(shí)候return {name: 'plugins update',age: 20,} 覆蓋了請(qǐng)求的結(jié)果，更多詳情請(qǐng)見(jiàn)文檔。

下面是我基于ahooks實(shí)現(xiàn)的vue的hooks庫(kù) vue-hooks-plus，收獲很多，框架的機(jī)制所體現(xiàn)出來(lái)的獨(dú)特性讓人眼前一亮 ??。后續(xù)還會(huì)挑重點(diǎn)hooks詳細(xì)講解原理和大家分享。

更多

文檔地址

GitHub地址

以上就是VueUse使用及造輪子選擇對(duì)比示例詳解的詳細(xì)內(nèi)容，更多關(guān)于VueUse對(duì)比造輪子的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論