获取数据是几乎每个React应用程序的基本要求。 React 中有多种获取数据的方法,包括内置的 Fetch API、Axios、async/await 语法等。我们将详细介绍其中一些方法。

React 组件可以简单地获取它们的数据。有几个选项可以获取数据:

• 谁对这个数据感兴趣?数据获取组件应该是所有组件的共享父组件。

• 当期望来自异步请求的数据时,您究竟想在哪里显示加载指示器(例如加载微调器、进度指示器)?负载指示器可以从第一个标准映射到公共父组件。那么公共父组件仍然是数据获取组件。

• 当加载指示器应该显示在更高级别的组件中时,需要将数据提取转移到该组件。

• 当需要在公共父组件的子组件中显示负载指示器时,不一定在那些需要数据的组件中,公共父组件也成为获取数据的组件。然后可以将负载指示器的状态传输到与显示负载指示器有关的所有子组件。

• 如果请求失败,您希望显示的可选错误消息在哪里?负载指示器的第二个标准中的相同规则在这里适用。

都是关于应该在 React 组件架构中获取数据的位置。但是,什么时候应该获取数据,一旦匹配了通用父组件,应该如何获取数据?让我们看看使用 React](https://flatlogic.com/blog/using-react-with-express/)检索数据[的一些方法。

在大多数现代浏览器中,Fetch API 是一个内置在窗口对象 (window. fetch) 中的工具,它允许通过使用JavaScript承诺非常简单地发出HTTP请求。

使用 React Hooks

axios

Axios 是一个基于 Promise 的客户端 HTTP库。它有助于向 REST 端点发送异步HTTP请求,并帮助执行CRUD操作。该 REST API/端点是一个外部 API,如 Google API、GitHub API,或者它可以是您的后端Node.js服务器。

本文是关于 React 应用程序的,因此我们将使用 React 挂钩来访问状态和其他功能。我们将使用的钩子是useEffect()和useState()。本质上,在这种情况下,useEffect()挂钩将在应用程序渲染/挂载后获取帖子,而useState()挂钩将帮助为我们的数据创建本地存储。首先,您需要通过npm安装 axios。

• 在 React 中使用 Axios 发出GET请求。GET请求用于从端点检索数据,并且由于useEffect()挂钩,这会在应用程序渲染后立即发生。首先,它将使用一个变量,然后连接.get()方法以向端点/API 发出GET请求。然后使用.then()回调来获取所有响应数据,因为已经有一个 Axios 实例存储了分配给变量(客户端)的基本 URL。

• Consuming GETRequest. 当GET请求成功执行后,下一步就是消费存储在post-state中的数据。

• 在 React 中使用 Axios 发出POST请求。POST请求用于将数据发送到端点,其工作方式与GET请求类似,但生成的函数用于执行此任务,在其他情况下或提交表单时运行。它将使用.post()方法。该函数接受一个对象来发送数据并将数据添加到状态,删除以前的数据并添加新数据。

• 发出DELETE请求。DELETE请求用于从端点/API 和用户界面中删除某些数据。它将使用.delete()方法。

总的来说,Axios 是关于提高生活质量的,而不是其他任何事情。但是,对生活质量工作流程进行大量小的、逐步的更改可以显着提高开发质量和速度。

async/await语法

ECMAScript 2017 引入了使用 async / await 语法使用 Promise 的能力。这样做的好处是它允许删除.then()、.catch()和.finally()回调并简单地获取异步解析的数据,就好像在编写没有任何承诺的同步代码一样。换句话说,在 React 中使用 async / await 时不需要依赖回调。记住在使用useEffect时,效果函数不能异步。

使用Fetch

在要获取数据的每个组件中编写useEffect钩子及其所有模板最终会很耗时。为了减少代码重用,您可以使用自定义挂钩作为特殊抽象,您可以从第三方库(使用 react-fetch-hook 库)自己编写。在HTTP请求上运行自定义钩子可以使组件更简洁。您唯一需要做的就是调用组件顶部的钩子。

因此,当返回所有数据但没有useEffect时,加载和错误状态应该能够为该组件使用与以前相同的结构。每次必须执行请求时,不再需要使用该代码来解析来自GET请求的承诺。

反应查询

React-Query 库允许处理web服务请求中隐含的数据,并在改善用户体验的同时维护应用程序。首先,您需要导入 React、useQuery挂钩和axios库。接下来,定义一个异步函数。并创建一个功能性的 React 组件。

React-Query 与常用的取数据库useEffect的区别在于,React-Query 会先返回之前取到的数据,然后再重新取回。而useEffect独立于更改的数据获取数据并重新加载页面。

结论

React 是构建丰富且高度可扩展的用户界面的绝佳工具。它的一些强大功能是能够为Web 应用程序从外部获取数据并与之交互。在 React 应用程序中使用 REST API 的方法有很多,但是在本指南中,我们讨论了如何使用一些最流行的方法来使用它,例如 Axios(基于 Promise 的 HTTP 客户端) 、useEffect和useFetch钩子、React-Query 库等。