使用 React Hooks 编写 REST API 时如何重用代码？

Posted 2023-02-22

【中文标题】使用 React Hooks 编写 REST API 时如何重用代码？

【英文标题】：How can I reuse code when writting REST API with React Hooks?

【发布时间】：2020-11-10 13:30:36

【问题描述】：

我正在阅读一个 REST API 教程并做出反应，但我想提前一步编写干净的代码。因此，我想向您寻求帮助，以便我可以针对不同的 API 请求重用钩子。

在本教程中，我编写了这个示例，其中 Hooks 用于保存 API 请求状态，并认为这是一个我可以重复使用的好模式。基本上除了const data = await API.getItems(token['my-token']) 之外的所有东西都可以用于我想要发出的所有/大多数API 请求。在构建干净的 API 框架时，我应该如何使用这些技术重用代码？

import  useState, useEffect  from 'react';
import  API  from '../api-service';
import  useCookies  from 'react-cookie';

function useFetch() 
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState();
    const [token] = useCookies(['my-token']);

    useEffect( ()=> 
        async function fetchData() 
            setLoading(true);
            setError();
            const data = await API.getItems(token['my-token'])
                .catch( err => setError(err))
            setData(data)
            setLoading(false)
        

        fetchData();
    , []);
    return [data, loading, error]


export  useFetch 

非常感谢！

【参考方案1】：

看起来您已经有了一个自定义挂钩。你可以在任何你想要的组件中使用它。

基本上除了 const data = await API.getItems(token['my-token']) 可用于所有/大多数 API 请求 我想做。

您可以向自定义挂钩发送一些参数，并根据这些参数动态发送请求。

function useFetch(someArgument) 
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState();
  const [token] = useCookies(["my-token"]);

  useEffect(() => 
    async function fetchData() 
      setLoading(true);
      setError();
      if (someArgument === 'something') 
        const data = await API.getItems(token["my-token"]).catch((err) =>
          setError(err)
        );
       else 
        // do something else
      
      setData(data);
      setLoading(false);
    

    fetchData();
  , []);
  return [data, loading, error];

在组件中使用自定义钩子：

import React from "react";

export default ( name ) => 
  const [data, loading, error] = useFetch('something');
  
  return <h1>Hello name!</h1>;
;

【参考方案2】：

我认为你做得很好，但你可以通过参数化它来改进代码，也许是这样的（如果你总是以相同的方式使用 cookie 和令牌）：

import  useState, useEffect  from 'react';
import  API  from '../api-service';
import  useCookies  from 'react-cookie';

function useFetch(cookieName, promiseFactory) 
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState();
    const [token] = useCookies([cookieName]);

    useEffect( ()=> 
        async function fetchData() 
            setLoading(true);
            setError();
            const data = await promiseFactory(token[cookieName])
                .catch( err => setError(err))
            setData(data)
            setLoading(false)
        

        fetchData();
    , []);
    return [data, loading, error]


export  useFetch 

您可以添加cookieName 或cookie 名称数组以及promise，这显然可能有所不同。 promiseFactory 将接受令牌并执行其特定的工作(token) => Promise，以便将令牌检索逻辑封装在挂钩中，即token[cookieName] 部分。

用法如下：

function SomeComponent 
        const promiseFactory = (token) => API.getItems(token);
    
        const [data, loading, error] = useFetch('my-token', promiseFactory );
    

---

如果 cookie 逻辑和令牌检索也特定于仅针对您提供的情况，您可以将其移出挂钩，例如：

function SomeComponent 
    const [token] = useCookies(['my-token']);

    const promise = API.getItems(token['my-token']);

    const [data, loading, error] = useFetch(promise);

第二种方法将完全抽象出有关如何构造请求的细节。