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