📌  相关文章
📜  用于 React 的 useFetch 自定义钩子 - Javascript (1)

📅  最后修改于: 2023-12-03 15:40:52.951000             🧑  作者: Mango

用于 React 的 useFetch 自定义钩子 - Javascript

在使用 React 构建 Web 应用程序时，经常需要从服务器获取数据。 这通常涉及到编写异步代码，以便在获取数据后更新组件的状态。 为了简化这个过程，我们可以使用自定义钩子来将重复性的异步逻辑封装在一个单独的可重用函数中。其中一个常见的钩子是 useFetch，它使获取数据变得更加容易。

什么是 useFetch？

useFetch是一个自定义钩子，用于在 React 组件中获取数据。该钩子封装了常见的异步请求逻辑，如发起请求、等待响应、处理错误等。它接收一个 URL 参数，并返回一个包含数据、状态和错误的对象。

使用 useFetch

首先，我们需要导入 useFetch 钩子并使用它。下面是一个简单的用例：

import React from 'react';
import useFetch from './useFetch';

function App() {
  const { data, loading, error } = useFetch('https://api.github.com/users/octocat');

  if (loading) {
    return <div>Loading...</div>
  }

  if (error) {
    return <div>Error: {error.message}</div>
  }

  return (
    <div>
      <div>{data.login}</div>
      <div>{data.bio}</div>
      <div>{data.followers} followers</div>
    </div>
  );
}

export default App;

在上面的代码中，我们首先导入 useFetch 钩子，然后在组件中调用它，并传递一个 URL 参数。钩子返回一个包含 data、loading 和 error 的对象。我们使用这些状态来显示响应的数据。

在上述示例中，我们获取 GitHub 上 octocat 用户的公共信息。 useFetch 钩子简化了异步请求的流程，使我们能够像同步代码一样定义数据的属性，并自动处理加载和错误状态。

useFetch 代码实现

下面是 useFetch 钩子的代码实现：

import { useState, useEffect } from 'react';

export default function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const res = await fetch(url);
        const json = await res.json();
        setData(json);
        setLoading(false);
      } catch (error) {
        setError(error);
        setLoading(false);
      }
    }

    fetchData();
  }, [url]);

  return { data, loading, error };
}

在上面的代码中，我们定义了一个名为 useFetch 的函数，并接收一个 URL 作为参数。函数内部使用 useState 钩子定义了三个状态。然后在 useEffect 钩子中执行了异步请求。

fetchData 函数使用 async/await 语法编写，发出 GET 请求，并使用 res.json() 方法解析响应。 如果请求成功，我们更新 data 和 loading 状态。 否则，我们更新 error 和 loading 状态。 最后，我们返回一个包含这些状态的对象。

结论

useFetch 钩子使获取数据变得更容易，尤其是当需要处理多个异步请求时。此外，它是可重用的，可以在多个组件中使用。如果您经常需要从服务器获取数据，则应该考虑将 useFetch 插入您的工具箱中，您将很快发现自己在整个应用程序中使用它。

参考