Hyper Fetch 开源项目教程

符卿玺

于 2024-09-24 08:18:36 发布

阅读量283

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00568/article/details/142476532

版权

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

基本使用

以下是一个简单的示例，展示如何设置 Hyper Fetch 并创建一个可重用的请求：

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

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

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

export const getData = client.createRequest({
  method: "GET",
  endpoint: "/user"
});

// 执行请求
const [data, error, status] = await getData.send();

动态数据传递

你也可以在发送请求时动态传递数据：

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()}>Trigger request</button>;