useFetch

采用原生fetch封装的请求器，基于vueuse/useFetch实现并支持了缓存、更新、条件、重试、防抖、节流、推流等全新功能。

使用场景

useFetch用来处理异步请求数据之间的关系，有如下三种典型使用场景：

1. 声明式+响应式场景

useFetch的payload为响应式数据，并开启了refetch自动更新，如下示例 data2 和 data1：

javascript

import { useFetch } from "fluth-vue";
// 定义
const useFetchApi = (payload: Ref<Record<string, any>>) =>
  useFetch("https://example.com", { immediate: true, refresh: true }).post(payload).json();
// 使用
const data1 = ref({ a: 1 });
const { data: data2 } = useFetchApi(data1);

data2 和 data1 通过useFetchApi函数形成了一种声明式的关系，使用方无需关心生产 data2 的细节
data2 和 data1 通过useFetchApi函数形成了一种响应式的关系，data2 会随着 data1 的变化自动fetch更新

2. 声明式场景

useFetch的payload为响应式数据，没有开启refetch自动更新，如下示例 data2 和 data1：

javascript

import { useFetch } from "fluth-vue";
// 定义
const useFetchApi = (payload: Ref<Record<string, any>>) =>
  useFetch("https://example.com").post(payload, { immediate: false, refetch: false }).json();
// 使用
const data1 = ref({ a: 1 });
const { data: data2, execute: fetchData2 } = useFetchApi(data1);

data2 和 data1 通过useFetchApi函数形成了一种声明式的关系，使用方无需关心生产 data2 的细节
还是需要调用fetchData2函数来主动更新 data2，此时会拿最新的 data1 作为请求参数

3. 调用关系

useFetch的payload为非响应式式数据，每次使用自行取值，如下示例 data2 和 data1：

javascript

import { useFetch } from "fluth-vue";
// 定义
const useFetchApi = (payload: Record<string, any>) =>
  useFetch("https://example.com").post(payload).json();
// 使用
const data1 = ref({ a: 1 });
const { data: data2 } = await useFetchApi(data1.value);

data2 是通过调用useFetchApi异步函数并实时取出当前 data1 的值作为请求参数来获取的

useFetch ​

使用场景 ​

useFetch

使用场景