Hyper Fetch 开源项目教程

Hyper Fetch 开源项目教程

hyper-fetch ⚡ Fetching and realtime data exchange framework. 项目地址: https://gitcode.com/gh_mirrors/hy/hyper-fetch

1. 项目介绍

Hyper Fetch 是一个独特的数据获取和实时数据交换框架，专为简化和高效率而设计。它具有类型安全的设计和用户友好的接口，确保在浏览器或服务器环境中都能无缝集成。Hyper Fetch 提供了下一代功能，简化了架构创建，允许访问请求生命周期，并支持快速开发新组件和功能，同时促进实时数据交换。

主要特性

• 简单设置
• 请求取消
• 请求去重
• 请求队列
• 响应缓存
• 离线优先
• 内置获取器
• 认证支持
• 智能重试

2. 项目快速启动

安装

使用 npm 或 yarn 安装 Hyper Fetch 的核心包：

npm install --save @hyper-fetch/core

或

yarn add @hyper-fetch/core

简单设置

首先，设置与服务器的连接：

import { Client } from "@hyper-fetch/core";

// 设置服务器连接
export const client = new Client({
  url: "http://localhost:3000"
});

// 创建可重用的请求
export const postData = client.createRequest<ResponseType, RequestType, LocalErrorType, QueryParamsType>({
  method: "POST",
  endpoint: "/data/:accountId"
});

export const getData = client.createRequest<ResponseType, RequestType, LocalErrorType, QueryParamsType>({
  method: "GET",
  endpoint: "/user"
});

执行请求

使用 send 方法执行预先准备好的请求：

const [data, error, status] = await getData.send();

发送数据

可以通过 setParams、setQueryParams 和 setData 方法设置请求参数和数据：

const request = postData
  .setParams({ accountId: 104 }) // 设置参数
  .setQueryParams({ paramOne: "test", paramTwo: "test2" }) // 设置查询参数
  .setData({ name: "My new entity", description: "Some description" }) // 设置数据
  .send();

3. 应用案例和最佳实践

React 中的使用

在 React 中使用 Hyper Fetch 进行生命周期请求：

import { useFetch } from "@hyper-fetch/react";

// 生命周期请求
const [data, error, loading, onSuccess, onError] = useFetch(getData);

onSuccess((data) => {
  console.log(data);
});

onError((error) => {
  console.log(error);
});

手动触发请求

手动触发请求并传递动态数据：

import { useSubmit } from "@hyper-fetch/react";

const [submit, data, error, submitting, onSubmitSuccess, onSubmitError] = useSubmit(request);

onSuccess((data) => {
  console.log(data);
});

onError((error) => {
  console.log(error);
});

return (
  <button onClick={() => submit({
    params: { accountId: 104 },
    data: { name: "My new entity", description: "Some description" },
    queryParams: { paramOne: "test", paramTwo: "test2" }
  })}>
    Trigger request
  </button>
);

4. 典型生态项目

Hyper Fetch 生态系统

Hyper Fetch 不仅是一个数据获取框架，还支持多种生态系统项目，如：

• Hyper Fetch Sockets: 用于实时数据交换的 WebSocket 支持。
• Hyper Fetch React: 为 React 应用提供集成支持。
• Hyper Fetch Firebase: 与 Firebase 集成，提供更强大的后端支持。
• Hyper Fetch GraphQL: 支持 GraphQL 查询和操作。

这些生态系统项目使得 Hyper Fetch 成为一个功能强大且灵活的数据获取和实时数据交换解决方案。

hyper-fetch ⚡ Fetching and realtime data exchange framework. 项目地址: https://gitcode.com/gh_mirrors/hy/hyper-fetch