通过Fetch和Axios在React中使REST API

如果您是一名 React 开发人员，想要学习如何在 React 应用中集成 API，这篇文章非常适合您。本文将介绍在 React 中使用 REST API 的两种最流行的方法：Fetch API 和 Axios。Shedrack Akintayo 将向您展示如何利用这些工具来构建一个简单的应用程序，并解释什么是 REST API。

在 React 应用程序中使用 REST API 可以通过多种方式完成，但在本教程中，我们将讨论如何使用两种最流行的方法来使用 REST API，即 Axios（基于 Promise 的 HTTP 客户端）和 Fetch API（浏览器内置的 Web API）。我会详细解释这两种方法，并展示它们一些很酷的功能。

API 是一种工具，可以帮助我们使用数据增强 React 应用程序。有些操作不能在客户端完成，因此这些操作是在服务器端实现的。然后，我们可以使用 API 在客户端使用数据。

API 由一组数据组成，这些数据通常采用 JSON 格式，具有指定的终端节点。当我们从 API 访问数据时，我们希望访问该 API 框架中的特定端点。我们也可以说 API 是两个服务之间关于请求和响应形式的合同协议。代码只是一个副产品。它还包含此数据交换的条款。

在 React 中，我们可以通过多种方式在应用程序中使用 REST API，这些方法包括使用 JavaScript 内置方法和 Axios，它是一个基于 Promise 的浏览器和Node.js HTTP 客户端。

注意：对 ReactJS、React Hooks、JavaScript 和 CSS 的良好了解将在你完成本教程时派上用场。

让我们开始了解有关 REST API 的更多信息。

什么是 REST API

REST API 是遵循根据 API 的 REST 结构构建内容的 API。REST 代表 “Representational State Transfer”。它由开发人员在创建 API 时遵循的各种规则组成。

REST API 的优势

1. 非常容易学习和理解;
2. 它使开发人员能够将复杂的应用程序组织成简单的资源;
3. 外部客户端可以轻松地在您的 REST API 上构建，而不会出现任何复杂性;
4. 它很容易扩展;
5. REST API 不是特定于语言或平台的，但可以与任何语言一起使用或在任何平台上运行。

REST API 响应示例

REST API 的结构方式取决于它所针对的产品 ，但必须遵守 REST 的规则。

下面的示例响应来自 Github Open API。在本教程的后面部分，我们将使用此 API 构建 React 应用程序。

{
"login": "hacktivist123",
"id": 26572907,
"node_id": "MDQ6VXNlcjI2NTcyOTA3",
"avatar_url": "https://avatars3.githubusercontent.com/u/26572907?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/hacktivist123",
"html_url": "https://github.com/hacktivist123",
"followers_url": "https://api.github.com/users/hacktivist123/followers",
"following_url": "https://api.github.com/users/hacktivist123/following{/other_user}",
"gists_url": "https://api.github.com/users/hacktivist123/gists{/gist_id}",
"starred_url": "https://api.github.com/users/hacktivist123/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/hacktivist123/subscriptions",
"organizations_url": "https://api.github.com/users/hacktivist123/orgs",
"repos_url": "https://api.github.com/users/hacktivist123/repos",
"events_url": "https://api.github.com/users/hacktivist123/events{/privacy}",
"received_events_url": "https://api.github.com/users/hacktivist123/received_events",
"type": "User",
"site_admin": false,
"name": "Shedrack akintayo",
"company": null,
"blog": "https://sheddy.xyz",
"location": "Lagos, Nigeria ",
"email": null,
"hireable": true,
"bio": " Software Engineer | | Developer Advocate