数据获取
数据获取
数据获取是大多数 Web 应用程序的关键组成部分。当我们深思熟虑时,大多数 Web 应用程序存在的目的就是让用户与数据库中的数据进行交互:
- 搜索引擎是巨大的数据库,让我们可以筛选它们数亿条记录,以找到最合适的结果。
- 像 Slack 这样的聊天应用程序让我们能够发送和接收存储在数据库中的消息。
- 社交网络提供从数据库中提取的动态,并让我们通过更新数据库中的数据与它们互动。
在接下来的课程中,我们将看到如何在 React 上下文中发送网络请求。
首选工具
有一个庞大的工具宇宙可以帮助我们管理网络请求。
在本课程中,我们将使用 Fetch 发起请求。Fetch 是 Web 平台的一部分,内置于浏览器中。如果您不熟悉,可以在“Fetch 基础”入门课程中了解有关使用 Fetch 的基础知识 👀。
在 React 社区中,使用第三方工具如 react-query 或 SWR 来帮助处理网络请求越来越受欢迎。在接下来的课程中,我们将看到 SWR 如何增强我们的 Fetch 请求。
先决条件
这些课程将重点讲解如何在 React 上下文中使用 Fetch。这里有相当多的“假定知识”,包括:
如果你在这些先决概念上有任何困难,请通过点击此页面底部的“提交反馈”按钮告诉我!我可以为这些内容添加补充课程/练习。😄
测试 API
我创建了一个示例后端 API,我们可以用来学习网络请求。
我们将在接下来的课程中详细了解如何使用它,但我想分享一个关于这个示例 API 的小备忘单:
所有请求会人为地延迟 1-2 秒,以便我们有时间检查加载状态。
我们可以通过传递查询参数 simulatedError=true 来模拟错误。
对于返回数据的端点,这些数据通常是随机的/伪造的。