持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第17天，点击查看活动详情

前言

上一章我们封装了一个useMouse的组合式函数，他没有接收任何的参数。今天我们就来封装一个可以接受参数的组合式函数。就拿我们平常开发中与后端请求数据的接口调用为例，当我们需要请求一个列表的数据的时候，往往会有四个状态：请求中、请求数据为空、请求数据不为空和请求错误。请求错误这里就不代码实例，因为我们这里常常通过一个警告弹窗来解决。下面我们就来看看这个组合式函数如何实现吧。

useFetch

正常不使用组合式函数的话，我们会这样写：

<script setup>
import { ref } from 'vue'

const data = ref(null)

fetch('...')
  .then((res) => res.json())
  .then((json) => (data.value = json))
</script>

<template>
  <div v-if="!data">Loading...</div>
  <div v-if="data.length">
    <span>这里有n条列表数据</span>
  </div>
  <div v-else></div>
</template>

我们可以看到关于fetch请求那块，如果每次在不同组件调用接口请求数据的时候都这么写的话，是非常繁琐的，那我们就可以把其封装为一个组合式函数：

// fetch.js
import { ref } from 'vue'

export function useFetch(url) {
  const data = ref(null)
  
  fetch(url)
    .then((res) => res.json())
    .then((json) => (data.value = json))
    
  return { data }
}

然后在组件中引入即可使用：

<script setup>
import { useFetch } from './fetch.js'

const { data } = useFetch('...')
</script>

观察上面的代码你可以发现useFetch接收一个url的字符串作为输入，使用的时候需要我们每次进行调用。所以基于这一点，我们可以再一次进行优化，让他同时可以接受一个ref作为输入，这样就可以监听url进行响应式的请求了。

// fetch.js
import { ref, isRef, unref, watchEffect } from 'vue'

export function useFetch(url) {
  const data = ref(null)

  function doFetch() {
    // 每次请求的时候初始化状态
    data.value = null
    error.value = null
    // 通过unref()解包ref可以更好的监听
    fetch(unref(url))
      .then((res) => res.json())
      .then((json) => (data.value = json))
  
  }

  // 判断输入的url是否是ref，并进行的监听或直接调用
  if (isRef(url)) {
    watchEffect(doFetch)
  } else {
    doFetch()
  }

  return { data }
}

这样我们即完成了可以接受静态的url，也完成了结果ref的url。

注意:如果我们通过watchEffect()来监听ref时，一定要用unref()来进行结构，这样有利于其正确的跟踪。或者使用watch() 显式地监听相应的ref。

Vue组合式函数（二）封装一个请求

前言

useFetch