用于 Api 调用的自定义钩子（Reactjs）-js教程-PHP中文网

用于 Api 调用的自定义钩子（Reactjs）

WBOY

发布： 2024-07-10 11:46:18

转载

692人浏览过

用于 api 调用的自定义钩子（reactjs）

我确信在开发复杂且大型的 React 应用程序时，每个人都会为代码的可重用性而苦苦挣扎。一种方法是（用于 api 调用的自定义挂钩）。让我们开始创建它们吧。

首先，我对我的糟糕写作感到抱歉，我的语言本来就不是英语:)

当然，我们在应用程序中必须多次从服务器获取数据。那么，我们如何才能有效地处理这些需求呢？

使用获取自定义挂钩

该自定义钩子的代码将是这样的：

从“axios”导入axios；
从“反应”导入{useState}；
从“react-toastify”导入{toast}；
从“../../features/utils/ApiErrorMessages.json”导入 apiErrors；

导出默认函数 useGet() {
  const [getRes, setGetRes] = useState({});
  const [getLoading, setGetLoading] = useState(true);
  const [getError, setGetError] = useState({});

  const getData =（url：字符串|未定义，配置：对象）=> {
    如果（网址）{
      轴
        .get（网址，配置）
        .then((res) => {
          setGetRes(res.data);
          setGetLoading(假);
        })
        .catch((错误) => {
          setGetError(错误);
          setGetLoading(假);
          toast.error(apiErrors.server_network_error);
        });
    }
  };

  返回 { getData, getRes, getError, getLoading };
}

登录后复制

说明：当我搜索创建像 useGet 这样的钩子时，我在通灵时遇到了问题。这个问题在我每次使用那个钩子时都会导致无限循环！我通过提供一个函数来从 useGet 返回调用使用端来解决这个问题，而不是调用它自己的钩子。
你可以很明显地看到它。（getData函数）

我们在那个钩子中真正做的事情是这样的：
1-设置所需的状态
2-声明 getData 函数（该函数向给定的 url 发送 get 请求并保存我们状态中的响应和错误）
3-返回我们写的所有状态和函数

使用方法如何？我不得不说它会是这样的：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

const {getData , getRes , getErrors , getLoading} = useGet()

使用效果（（）=> {
    异步 const fetche = () => {
        等待 getData({url : '/api/users' , 配置 : {}});
    } 
},[])

// 你的渲染逻辑

登录后复制

我不知道我是如何很好地解释我的代码中发生的事情的，但我希望你理解这一点。

usePost 自定义挂钩
代码：

从“axios”导入axios；
从“反应”导入{useState}；
从“../../features/utils/ApiErrorMessages.json”导入 apiErrors；
从“react-toastify”导入{toast}；

输入 postDataProps = {
  网址：字符串|不明确的;
  数据：对象；
  配置：对象；
};

导出默认函数 usePost() {
  const [postRes, setPostRes] = useState({});
  const [postLoading, setPostLoading] = useState(true);
  const [postError, setPostError] = useState({});

  const postData = ({ url, data, config }: postDataProps) => {
    如果（网址）{
      轴
        .post（网址、数据、配置）
        .then((res) => {
          setPostLoading(假);
          setPostRes(res.data);
        })
        .catch((错误) => {
          setPostLoading(假);
          setPostError(错误);
          toast.error(apiErrors.server_network_error);
        });
    }
  };

  返回 { postData, postRes, postError, postLoading };
}

登录后复制

要快乐！逻辑是一样的。但这是数据属性的差异！我们知道，当我们想要将某些内容发布到服务器时，我们必须随之发送数据。所以我们也在这里发送数据。

实施它们非常容易。现在您可以在您的应用程序中重复使用您的调用 api 功能！
Maby，我在这些钩子上没有很好地进行最佳实践。我正在学习。但现在可以了。
不要忘记可重用性。

快乐编码。

以上就是用于 Api 调用的自定义钩子（Reactjs）的详细内容，更多请关注php中文网其它相关文章！