在 React 中获取数据的6种方法

一、前言

数据获取是任何 react 应用程序的核心方面。对于 React 开发人员来说，了解不同的数据获取方法以及哪些用例最适合他们很重要。

但首先，让我们了解 JavaScript Promises。

简而言之，promise 是一个 JavaScript 对象，它将在未来的某个时间产生一个值。这通常适用于异步操作（例如数据获取）。

Promises具有三种状态：

• Pending：承诺仍在进行中的地方
• Fulfilled：承诺成功解决并返回值的地方
• Rejected：承诺因错误而失败

如果一个promise被Fulfilled或Rejected，它就被解决了。Promise 有不同的方法来根据结果做不同的事情。下一节将更详细地讨论这些方法。

二、使用 Promise 方法获取 api

Fetch API 提供了一个全局的 fetch() 方法，使开发人员能够以直接的方式获取数据。在 fetch() 之前，传统方法是使用 XMLHttpRequest()。（本文不涉及此方法，因为 fetch() 已被更强大、更灵活的功能集所取代。）

fetch() 方法接受一个参数，即要请求的 URL，并返回一个promise。第二个可选参数options 是一个属性数组。fetch() 的返回值可以是 JSON 或 XML（对象数组或单个对象）。如果没有选项参数，fetch() 将始终发出 GET 请求。

第一种方法是您通常会在简单的数据获取用例中看到的方法，并且通常是浏览 API 文档时的第一个结果。

如前所述，我们从返回狗的随机图像的 API 获取数据，并将该图像呈现在屏幕上。在发出请求之前，我们将代码包装在一个带有空依赖项数组的 useEffecthook 中，以便 fetch() 方法仅在组件最初安装时运行。

useEffect(() => {
    fetch(URL)
      // syntax for handling promises
      .then((res) => {
        // check to see if response is okay
        if (res.ok) {
          // if okay, take JSON and parse to JavaScript object
          return res.json();
        }
        throw res;
      })
      //  .json() returns a promise as well
      .then((data) => {
        console.log(data);
        // setting response as the data state
        setData(data);
      })
      // if res is not okay the res is thrown here for error
      .catch((err) => {
        console.error(`Error: ${err}`);
        // setting the error state
        setError(err);
      })
      //  regardless if promise resolves successfully or not we remove loading state
      .finally(() => {
        setLoading ( false );
      });
  }, []);

在上例中，我们调用该方法并传入 API 端点的 URL。在这个方法中，我们使用 promise 对象的方法（回想一下返回一个 promise）。

我们使用这个方法并传入一个回调函数来检查响应是否正常。如果响应正常，我们将获取返回的 JSON 数据并使用该方法将其解析为 JavaScript 对象。如果响应不正常，我们就会报错。

由于 .json() 方法也返回一个承诺，我们可以链接另一个 .then() 并传递一个函数来设置数据的状态，然后在组件的其他地方使用。在我们的示例中，外部 API 返回一个具有 url 属性的对象（它将用作 srcour 图像）。

继续通过链，下一部分是 .catch() 以安排在承诺被拒绝时调用的函数。这也返回另一个承诺，然后我们可以链接 .finally() 无论承诺是否已解决（解决或拒绝），它都会被调用。

这种 .finally() 方法使我们能够避免在 .then() 和 .catch() 中重复代码，使其成为我们示例中删除加载状态的好地方。

三、带有 Promise 方法的库 Axios

Axios 是一个流行的 HTTP 客户端库，用于高效的数据获取。它可以通过 npm 或其他包管理器轻松安装到 React 应用程序中。使用 Axios 是 Fetch API 的替代方法，如果您不介意安装外部库，它有一些优势。

第二个示例将非常接近第一个示例的代码，使用相同的 promise 方法来处理 promise 状态和响应。

在 fetch() 将 Axios 库导入我们的组件之后，我们可以使用 axios.get() 一种可以将 URL 传递到我们的外部 API 端点的方法。

这将返回一个 Promise，因此我们可以采用与 Promise 方法链接相同的方法。

useEffect(() => {
    axios.get(URL)
      // syntax for handling promises
      .then((res) => {
        console.log(res.data);
        // axios converts json to object for us (shortens our code)
        setData(res.data);
      })
      // axios takes care of error handling for us instead of checking manually
      .catch((err) => {
        console.error(`Error: ${err}`);
        // setting the error state
        setError(err);
      })
      //  regardless if promise resolves successfully or not we remove loading state
      .finally(() => {
        setLoading ( false );
      });
  }, []);

Fetch API 的代码与此 Axios 方法之间的明显区别在于，使用 Axios 我们只需要一个，因为 Axios 为我们将 .then()JSON 转换为 JavaScript 对象（缩短了我们的代码）。

另外，我们不再写条件来手动抛出错误，因为axios会为你抛出400和500范围的错误（再次缩短我们的代码）。

四、异步函数（async/await）

在此示例中，我们将放弃在前两个示例中使用的承诺链，而是引入一种更现代的方法来编写异步的、基于承诺的代码。

这种方法可以与您选择的任何抓取机制一起使用，但对于本示例，我们将坚持使用 Axios 库。

第三个示例与前一个示例类似的方式设置组件，方法是导入 Axios 库，然后使用一个空的 dependencies 数组包装用于在 useEffecta 中获取数据的代码。

在 useEffect 中，我们使用关键字 async 创建一个异步函数，然后在该函数中我们有三个独立的部分 - try、catch 和 finally。

这种 try/catch 方法用于处理 JavaScript 中的错误。try块内的代码首先被执行，如果抛出任何错误，它们将被“捕获”在块中，catch并执行内部代码。

最后，finallyblock 将始终在流通过 try/catch 之后执行。

useEffect(() => {
    // create async function b/c cannot use async in useEffect arg cb
    const fetchData = async () => {
    //   with async/await use the try catch block syntax for handling
      try {
        // using await to make async code look sync and shorten 
        const res = await axios.get(URL);
        setData(res.data);
      } catch (err) {
        console.error(`Error: ${err}`);
        // setting the error state
        setError(err);
      } finally {
        setLoading ( false );
      }
    };


    fetchData ();
  }, []);

在此示例中，try 块创建了一个名为 res（response 的缩写）的变量，该变量使用 async 关键字。这允许代码看起来同步（更短，更容易在眼睛上）。

在此示例中，axios.get(URL) 正在“等待”直到它稳定下来。如果承诺得到履行，那么我们将数据设置为状态。如果承诺被拒绝（抛出错误），它会进入 catch 块。

五、创建一个“useFetch”自定义 React Hook

第四种方法是创建我们自己的自定义 React 钩子，调用 useFetchit 可以在我们应用程序的不同组件中重复使用，并从每个组件中删除笨重的获取代码。

这个例子实际上只是采用第四个例子（使用 Axios 库和 async/await 的相同技术）并将该代码移动到它自己的自定义钩子中。

为此，我们创建了一个名为 useFetch.js 的函数。然后我们使用 Effect 将前面示例中的所有代码以及我们正在跟踪的不同状态添加到函数 useFetch 中。

最后，这个函数将返回一个包含每个状态的对象，然后在调用钩子的地方使用 useFetchaccessed。我们的 useFetchhook 还将接受一个参数，即 URL ，以允许更多的可重用性和向不同端点发出提取请求的可能性。

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


  useEffect(() => {
    // create async function b/c cannot use asyc in useEffect arg cb
    const fetchData = async () => {
      //   with async/await use the try catch block syntax for handling
      try {
        // using await to make async code look sync and shorten
        const res = await axios.get(url);
        setData(res.data);
      } catch (err) {
        console.error(`Error: ${err}`);
        // setting the error state
        setError(err);
      } finally {
        setLoading ( false );
      }
    };


    fetchData ();
  }, []);


  return {
    data,
    loading,
    error,
  };
};

最后，我们将这个新的自定义钩子导入到将使用它的组件中，并像调用任何其他 React 钩子一样调用它。如您所见，这极大地提高了代码的可读性并缩短了我们的组件。

这种方法的最后一点是您还可以安装外部库而不是创建您自己的自定义挂钩。一个流行的库 react-fetch-hook 与我们刚刚构建的钩子具有非常相似的功能。

六、React 查询库

在 React 中获取数据的最现代和最强大的方法之一是使用 React Query 库。除了简单的数据获取之外，它还有许多功能，但是对于这个例子，我们将学习如何从同一个示例外部 API 中简单地获取数据。

安装和导入后，React Query 提供了许多自定义挂钩，可以以非常干净的方式在我们的组件中重复使用。

在此示例中，我们从中导入 QueryClient，然后使用提供程序包装我们的应用程序，并将 QueryClientProvider 实例作为属性传递给包装器。

这使我们能够在我们的应用程序中使用该库。

为了发出这个简单的 GET 请求，我们导入并使用了 useQueryhooks。与前面使用自定义挂钩的示例不同，我们传入了两个参数。

第一个必需参数是 queryKey ，用作此特定查询的参考键。

第二个必需参数是 queryFn ，它是查询将用于请求数据的函数。

我们将使用此查询函数，然后使用 Fetch API 和 promise 方法语法进行初始提取，而不是像我们之前的自定义挂钩示例中那样只传递一个简单的 URL。（这个钩子有许多其他可选参数。）

const { isLoading, error, data } = useQuery("dogData", () => fetch(URL).then((res) => res.json()));

isLoading 从这里开始，React Query 将在幕后完成所有额外的工作，在这种情况下，我们可以从这个钩子调用 destructure 、 error 和 use data in our application，尽管我们也可以访问许多其他值。

在比我们当前的 Dog Image API 示例更大的示例中，使用 React Query 的力量和优势是显而易见的。需要提及的一些附加功能包括：缓存、在后台更新“陈旧”数据以及其他与性能相关的优势。

七、Redux 工具包 RTK 查询

本文最后一种方法是使用Redux Toolkit的RTK Query进行数据采集。应用程序使用 Redux 进行状态管理是很常见的。

如果您的公司或您当前的副项目目前正在使用 Redux，一个不错的选择是使用 RTK 查询来获取数据，因为它提供了与 React 查询类似的简单性和优势。

要在存储 Redux 代码的任何地方开始使用 RTK 查询，请创建一个 rtkQueryService.js 文件来设置数据获取。

创建后，您将服务添加到您的 Redux 商店，假设您已经在使用 Redux，您将已经拥有一个包含您的应用程序的 store 组件。

从这里开始，它与使用带有 React Query 方法的自定义钩子非常相似，您导入然后使用查询钩子并解构数据，错误然后是 Loading 可以在您的组件中使用。

const { data, error, isLoading } = useGetDogQuery();

如您所见，Redux 有很多设置，因此这可能不是我们用例的最佳方法，但如果您已经在 React 应用程序中使用 Redux 并且想要一种简单而现代的获取数据的方式，RTK 查询 可能很棒很有价值，这也提供了缓存等好处。

最后的想法

如果你已经看到了这里，那么恭喜你！这篇文章的目的就是为那些学习 React 的人介绍一些不同的数据获取方法。

在这篇文章中，我介绍了6种方法，希望这6种方法对你有用，也希望你能从中学习到一些新东西。

此外，还有其他当前的数据获取方法未在此文章中提及，我相信随着 React 生态系统的发展，其他方法将会出现。也就是说，我相信本文为理解该领域提供了坚实的基础。

相关内容拓展：（技术前沿）

近10年间，甚至连传统企业都开始大面积数字化时，我们发现开发内部工具的过程中，大量的页面、场景、组件等在不断重复，这种重复造轮子的工作，浪费工程师的大量时间。

针对这类问题，低代码把某些重复出现的场景、流程，具象化成一个个组件、api、数据库接口，避免了重复造轮子。极大的提高了程序员的生产效率。

推荐一款程序员都应该知道的软件JNPF快速开发平台，采用业内领先的SpringBoot微服务架构、支持SpringCloud模式，完善了平台的扩增基础，满足了系统快速开发、灵活拓展、无缝集成和高性能应用等综合能力；采用前后端分离模式，前端和后端的开发人员可分工合作负责不同板块，省事又便捷。

免费体验官网：https://www.jnpfsoft.com/?csdn

还没有了解低代码这项技术可以赶紧体验学习！