前言
上一章我们封装了一个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。
