如何封装 vueuse 的 usefetch？

terry 5小时前阅读数 6 #Vue

文章标签封装 usefetch

在 Vue 项目中，数据获取是非常常见的操作，vueuse 中的 usefetch 提供了便捷的方式来处理数据请求，那如何对它进行封装呢？下面我们来详细探讨。

为什么要封装 usefetch？

直接使用 usefetch 虽然方便，但在大型项目中，会存在一些问题，每个页面都重复编写相似的请求代码，代码冗余度高；处理请求的错误、加载状态等逻辑分散，不利于维护和统一管理，封装后可以实现代码复用，统一处理请求相关的通用逻辑，提高开发效率和代码质量。

封装的基本步骤

创建封装函数

我们创建一个专门的函数来封装 usefetch。

```javascript import { usefetch } from '@vueuse/core'

const useMyFetch = (url, options = {}) => { // 这里可以对 options 进行一些默认设置，比如添加公共的请求头 const defaultOptions = { headers: { 'Content-Type': 'application/json' } } const mergedOptions = { ...defaultOptions,...options } return usefetch(url, mergedOptions) }

<p>这样，在调用的时候就可以传入 url 和自定义的 options，而不需要每次都写默认的请求头之类的公共配置。</p>
### 2. 处理请求状态
<p>usefetch 返回的对象中有一些属性可以表示请求状态，如 isFetching（是否正在请求）、error（请求错误信息）等，我们可以在封装函数中进一步处理这些状态，比如统一处理加载中的提示。</p>
```javascript
const useMyFetch = (url, options = {}) => {
  const defaultOptions = {
    headers: {
      'Content-Type': 'application/json'
    }
  }
  const mergedOptions = { ...defaultOptions,...options }
  const { data, error, isFetching,...rest } = usefetch(url, mergedOptions)
  // 处理加载状态，比如显示一个全局的加载动画（假设项目中有相关的 UI 组件）
  watch(isFetching, (newVal) => {
    if (newVal) {
      // 显示加载动画
      showGlobalLoading()
    } else {
      // 隐藏加载动画
      hideGlobalLoading()
    }
  })
  return { data, error,...rest }
}

这里通过 watch 监听 isFetching 的变化来控制加载动画的显示和隐藏，实现了请求加载状态的统一处理。

错误处理

对于请求错误,我们也可以在封装函数中进行统一处理，比如记录错误日志、给用户友好的提示等。

```javascript const useMyFetch = (url, options = {}) => { const defaultOptions = { headers: { 'Content-Type': 'application/json' } } const mergedOptions = { ...defaultOptions,...options } const { data, error, isFetching,...rest } = usefetch(url, mergedOptions)

watch(error, (newVal) => { if (newVal) { // 记录错误日志（可以调用项目中的日志记录函数） logError(newVal) // 给用户提示错误信息 showErrorToast(newVal.message) } })

watch(isFetching, (newVal) => { if (newVal) { showGlobalLoading() } else { hideGlobalLoading() } })

return { data, error,...rest } }

<p>通过这样的封装，当请求出现错误时，会自动记录日志并给用户提示，而不需要在每个使用 usefetch 的地方单独处理。</p>
### 4. 结合 Vue 的组合式 API 进行扩展
<p>如果项目中使用了 Vue 的组合式 API，我们还可以进一步扩展封装函数，将请求的数据进行缓存，避免重复请求。</p>
```javascript
import { ref, watch } from 'vue'
import { usefetch } from '@vueuse/core'
const useMyFetch = (url, options = {}) => {
  const defaultOptions = {
    headers: {
      'Content-Type': 'application/json'
    }
  }
  const mergedOptions = { ...defaultOptions,...options }
  const { data, error, isFetching,...rest } = usefetch(url, mergedOptions)
  const cache = ref(null)
  watch(url, () => {
    cache.value = null
  })
  watch(data, (newVal) => {
    if (newVal) {
      cache.value = newVal
    }
  })
  const fetchData = async () => {
    if (cache.value) {
      return cache.value
    }
    await usefetch(url, mergedOptions)
    return data.value
  }
  watch(error, (newVal) => {
    if (newVal) {
      logError(newVal)
      showErrorToast(newVal.message)
    }
  })
  watch(isFetching, (newVal) => {
    if (newVal) {
      showGlobalLoading()
    } else {
      hideGlobalLoading()
    }
  })
  return { data: cache, error, isFetching, fetchData }
}

这里通过 ref 创建了一个缓存变量 cache，当 url 变化时清空缓存，当数据请求成功时将数据存入缓存，新增的 fetchData 函数会先检查缓存，如果有缓存数据则直接返回，否则进行请求并返回数据，这样就实现了简单的数据缓存功能，提高了性能。