如何用use-http在5分钟内构建完整的API调用系统

【免费下载链接】use-http 🐶 React hook for making isomorphic http requests 项目地址: https://gitcode.com/gh_mirrors/us/use-http

use-http是一个强大的React hook，专为简化同构HTTP请求而设计。通过这个终极工具，开发者可以快速实现API调用、状态管理和错误处理，无需编写大量重复代码。本文将展示如何在短短5分钟内利用use-http构建一个功能完善的API调用系统，让你的React应用开发效率提升10倍！

快速安装与基础配置

首先，确保你的React项目已经准备就绪。通过以下命令安装use-http：

npm install use-http
# 或
yarn add use-http

安装完成后，你需要在应用的入口文件中配置Provider，这将为整个应用提供全局的HTTP请求设置。基础配置如下：

import { HttpProvider } from 'use-http'

function App() {
  return (
    <HttpProvider
      baseUrl="https://api.example.com"
      headers={{
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${localStorage.getItem('token')}`
      }}
    >
      {/* 你的应用组件 */}
    </HttpProvider>
  )
}

这个简单的配置已经为你的应用提供了统一的API基础URL和请求头，避免了在每个请求中重复设置这些信息。

核心功能：useFetch Hook详解

use-http的核心功能集中在useFetch hook上，它提供了直观且强大的API调用来处理各种HTTP请求。让我们看看如何使用它来实现常见的API操作。

基本GET请求

获取数据是最常见的API操作，useFetch让这个过程变得异常简单：

import useFetch from 'use-http'

function UserList() {
  const { data, loading, error, get } = useFetch('/users')

  useEffect(() => {
    get()
  }, [get])

  if (loading) return <div>加载中...</div>
  if (error) return <div>错误: {error.message}</div>

  return (
    <ul>
      {data?.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )
}

这段代码展示了如何使用useFetch获取用户列表数据。useFetch返回的对象包含了请求状态（loading）、响应数据（data）和错误信息（error），以及各种HTTP方法的调用函数（如get）。

自动取消请求与超时处理

use-http内置了请求取消功能，当组件卸载时会自动取消未完成的请求，避免内存泄漏。同时，它还支持超时设置，确保应用不会无限期等待响应。

如图所示，当组件卸载或发起新请求时，之前的请求会被自动取消，这对于处理用户快速切换视图的场景非常有用。你可以通过以下方式设置超时：

const { get } = useFetch('/data', {
  timeout: 5000, // 5秒超时
  onTimeout: () => alert('请求超时，请稍后再试')
})

缓存策略与数据持久化

use-http提供了灵活的缓存策略，可以显著提升应用性能并减少不必要的网络请求。默认情况下，它采用"cache-first"策略，优先使用缓存数据：

const { data, get } = useFetch('/products', {
  cachePolicy: 'cache-first', // 默认策略
  cacheLife: 300000, // 缓存有效期5分钟
  persist: true // 持久化缓存到localStorage
})

这个功能对于电商产品列表、新闻文章等不频繁变化的数据特别有用，可以大幅提升应用的加载速度和用户体验。

高级功能：useMutation与状态管理

除了获取数据，use-http还提供了useMutation hook来处理数据修改操作（如POST、PUT、DELETE请求），并内置了状态管理功能。

创建新数据

使用useMutation创建新数据非常简单：

import { useMutation } from 'use-http'

function CreateUser() {
  const [user, setUser] = useState({ name: '', email: '' })
  const { post, loading, error } = useMutation('/users')

  const handleSubmit = async (e) => {
    e.preventDefault()
    const result = await post(user)
    if (result) {
      alert('用户创建成功！')
      // 重置表单或导航到用户列表
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* 表单内容 */}
      <button type="submit" disabled={loading}>
        {loading ? '创建中...' : '创建用户'}
      </button>
      {error && <div className="error">{error.message}</div>}
    </form>
  )
}

错误处理与重试机制

use-http内置了强大的错误处理和自动重试功能，可以让你的应用更加健壮：

const { put, error } = useMutation('/users/:id', {
  retries: 3, // 最多重试3次
  retryDelay: 1000, // 重试间隔1秒
  retryOn: [500, 502, 503] // 只在这些状态码时重试
})

if (error) {
  return (
    <div className="error">
      <p>操作失败: {error.message}</p>
      <button onClick={() => put(userData)}>重试</button>
    </div>
  )
}

实际应用示例：构建完整的API调用系统

现在，让我们将这些功能整合起来，构建一个完整的API调用系统。这个系统将包含：

1. 全局请求配置
2. 用户认证与授权
3. 数据获取与缓存
4. 数据修改操作
5. 错误处理与状态管理

以下是一个综合示例，展示了如何在实际项目中组织和使用use-http：

// src/api/index.js
import { HttpProvider, useFetch, useMutation } from 'use-http'

// 全局API配置
export const ApiProvider = ({ children }) => (
  <HttpProvider
    baseUrl="https://api.your-app.com"
    headers={{
      'Content-Type': 'application/json',
    }}
    interceptors={{
      request: (req) => {
        const token = localStorage.getItem('auth_token')
        if (token) {
          req.headers.Authorization = `Bearer ${token}`
        }
        return req
      },
      response: (res) => {
        if (res.status === 401) {
          // 处理未授权错误，如重定向到登录页
          localStorage.removeItem('auth_token')
          window.location.href = '/login'
        }
        return res
      }
    }}
  >
    {children}
  </HttpProvider>
)

// 用户相关API
export const useUserApi = () => {
  const getUsers = useFetch('/users', { cacheLife: 300000 })
  const getUser = (id) => useFetch(`/users/${id}`)
  const createUser = useMutation('/users', { method: 'post' })
  const updateUser = useMutation('/users/:id', { method: 'put' })
  const deleteUser = useMutation('/users/:id', { method: 'delete' })
  
  return {
    getUsers,
    getUser,
    createUser,
    updateUser,
    deleteUser
  }
}

// 产品相关API
export const useProductApi = () => {
  const getProducts = useFetch('/products', { 
    cachePolicy: 'cache-first',
    persist: true
  })
  const searchProducts = useFetch('/products/search')
  const createProduct = useMutation('/products')
  
  return {
    getProducts,
    searchProducts,
    createProduct
  }
}

这个组织方式将API调用按功能模块进行了划分，使代码更加清晰和可维护。在组件中使用这些API也非常简单：

import { useUserApi } from '../api'

function UserManagement() {
  const { getUsers, deleteUser } = useUserApi()
  const { data: users, loading, error, get } = getUsers
  
  useEffect(() => {
    get()
  }, [get])
  
  const handleDelete = async (id) => {
    if (window.confirm('确定要删除这个用户吗？')) {
      await deleteUser(id)
      get() // 重新获取用户列表
    }
  }
  
  // 渲染用户列表...
}

性能优化与最佳实践

use-http不仅简化了API调用，还提供了多种性能优化选项。以下是一些最佳实践：

合理使用缓存策略

根据数据类型选择合适的缓存策略：

• 频繁变化的数据：使用"network-only"策略
• 不常变化的数据：使用"cache-first"策略
• 关键数据：使用"cache-and-network"策略，先显示缓存数据，同时请求最新数据

实现数据预获取

利用use-http的预获取功能在用户可能访问的页面提前加载数据：

function ProductList() {
  const { data, loading } = useFetch('/products', { 
    prefetch: true, // 组件挂载时自动请求数据
    cacheLife: 600000 // 缓存10分钟
  })
  
  // 组件渲染...
}

分页与无限滚动

use-http简化了分页数据的获取和管理：

function ProductList() {
  const [page, setPage] = useState(1)
  const { data, loading, get, hasMore } = useFetch(`/products?page=${page}&limit=20`, {
    cachePolicy: 'network-only'
  })
  
  const loadMore = () => {
    if (!loading && hasMore) {
      setPage(prev => prev + 1)
    }
  }
  
  // 实现无限滚动...
}

总结与资源

通过本文的介绍，你已经了解了如何使用use-http快速构建功能完善的API调用系统。这个强大的工具不仅简化了HTTP请求的处理，还提供了缓存、错误处理、请求取消等高级功能，让你能够专注于业务逻辑的实现。

use-http的源码主要集中在以下文件中，如果你想深入了解其实现原理，可以查看这些文件：

• src/useFetch.ts - 核心hook实现
• src/types.ts - 类型定义
• src/utils.ts - 工具函数

无论你是React新手还是有经验的开发者，use-http都能帮助你更高效地处理API调用，减少重复代码，提高应用性能。现在就尝试在你的项目中使用use-http，体验5分钟构建完整API调用系统的快感吧！

希望本文对你有所帮助，祝你在React开发之路上越走越远！如有任何问题，欢迎查阅项目的官方文档或提交issue。

【免费下载链接】use-http 🐶 React hook for making isomorphic http requests 项目地址: https://gitcode.com/gh_mirrors/us/use-http