vue3.x系列之封装响应式的hooks技巧

风清云淡_A2024-10-10 10:56

v3.x封装一个接口请求的hooks的，都应该很熟练了，那么要实现一个响应式的hooks该怎么做？

实现效果

代码实现

js 复制代码

<template>
  <div v-if="error">Oops! Error encountered: {{ error.message }}</div>
  <div v-else-if="data">
    Data loaded:
    <pre>{{ data }}</pre>
  </div>
  <div v-else>Loading...</div>
  <button @click="url = 'https://jsonplaceholder.typicode.com/todos/2'">发送</button>
</template>

<script setup>
import { useFetch } from "@/hooks/useFetch";
import { ref } from "vue";
let url = ref("https://jsonplaceholder.typicode.com/todos/1");
const { data, error } = useFetch(url);
</script>

js 复制代码

import { delay } from "lodash-es";
import { ref, watchEffect, toValue } from "vue";

export function useFetch(url) {
  const data = ref(null);
  const error = ref(null);
  function fetchData() {
    fetch(toValue(url))
      .then((res) => res.json())
      .then((res) => {
        delay(() => {
          data.value = res;
        }, 2000);
      })
      .catch((err) => (error.value = err));
  }
  watchEffect(() => {
    fetchData();
  });
  return { data, error };
}

技巧总结

这里我们传入的是一个url接口的ref,不是普通的字符串数据
hooks里面接收的时候，接口请求使用toValue转为普通的字符数据
watchEffect监听副作用，当ref数据变化时，及时响应来发起新的请求
delay方法模拟接口请求延时效果，区分出请求中的状态

v3.x的几个工具方法isRef,unref,toRef的对比

js 复制代码

// isRef  判断是否是ref类型
let url = ref("https://jsonplaceholder.typicode.com/todos/1");
const str = "hello world";
console.log(isRef(url), "isRef");
console.log(isRef(str), "isRef");

js 复制代码

// unref 解包ref
const unRefUrl = unref(url);
console.log("unRefUrl", unRefUrl);
console.log(unref(str), "unRefStr");

js 复制代码

// toRef 包装ref,可以将值、refs 或 getters 规范化为 refs (3.3+)。
const toRefUrl = toRef(url);
console.log("toRefUrl", toRefUrl);
console.log(toRef(str), "toRefStr");

js 复制代码

const state = reactive({
  foo: 1,
  bar: 2
});
const foo = toRef(state, "foo");

const foo1 = ref(state.foo);

上面这个 ref 不会和 state.foo 保持同步，因为这个 ref() 接收到的是一个纯数值。

toRef和ref的区别如下图