在 React 中使用 REST API
什么是API
什么是API
API 代表“应用程序编程接口”。它允许软件之间进行通信，并提供在应用程序之间共享数据的方法。REST API 代表“表述性状态转移”。
REST API 是一种软件架构风格，它定义了一组约束条件，并允许与 RESTful Web 服务进行通信。REST API 使用 HTTP 请求方法来访问和使用数据。
API 方法
以下是 REST API 方法：
-
Get 方法：顾名思义，它直接从 API 获取数据。
-
POST 方法： POST 方法用于将从应用程序收集的数据返回到服务器或 API。
-
Put 方法：此操作用于进行更改和更新请求。
-
删除方法：此方法用于删除不需要的信息或数据。
本文将使用一个免费的 API 来演示如何在 React 中使用 API 调用。
项目设置：
在命令提示符中运行以下代码以创建一个新的 React 应用。npx create-react-app api-usage
然后进入应用目录：cd api-usage
运行yarn start或npm start yarn startnpm start
你应该能在浏览器中看到 React 的标志在旋转。
本项目API：
API链接：icanhazdadjoke.com
在这个项目中，我们将使用 Axios。Axios 用于发送 HTTP 请求，并从 API、数据库或 XML 请求中获取数据。
运行：npm i axios
把里面的App.js东西都清理掉，它应该看起来像这样：
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
{/*No component yet*/}
</div>
);
}
export default App;
然后在该src文件夹内创建一个新组件Joke.js。由于我们Axios之前已经安装过，所以我们将把它导入到我们的应用程序中。
import React from 'react';
import axios from 'axios';
const Joke = () => {
return (
<div>
<h1>Jokes:</h1>
</div>
);
}
export default Joke;
从上面的代码可以看出：
我们正在创建一个新Joke组件并渲染一个h1，然后我们通过以下方式导出 Joke 组件default。
接下来，我们将Joke组件导入到App.js组件中，以便它可以在浏览器中显示。
import React from 'react';
import Joke from './Joke';
import './App.css';
function App() {
return (
<div className="App">
{/*Joke component*/}
<Joke/>
</div>
);
}
在您的浏览器中，您应该会Joke:在屏幕上看到以下内容：
接下来，我将演示如何在我们的代码中使用 API。
import React, {useState} from 'react';
import axios from 'axios';
function Joke = () => {
//create a state to store the jokes from the api
const [joke, setJoke] useState([]); //make sure you to import useState from react
//store the api in a variable
const apiLink = "https://icanhazdadjoke.com/";
//create a function to fetch the data
const fetchData = async () => {
const res = await axios.get(`${apiLink}`, { headers: { Accept: "application/json" } });
console.log(res.data);
console.log(res.data.joke)
}
return (
<div>
<h1>Jokes:</h1>
</div>
);
}
export default Joke;
从上面的代码可以看出：
我创建了一个状态const [joke, setJoke] = useState([])
来存储来自 API 的数据，并创建了一个函数fetchData
来从 API 获取数据，并将获取的数据存储在变量中，const apiLink = "https://icanhazdadjoke.com/";然后创建了响应变量const res = await axios.get(`${apiLink}` , { headers: { Accept: "application/json" } })。
我们使用`${apiLink}`async来await等待每次获取到的数据。我们还将数据记录到浏览器控制台，以便查看从 API 获取的数据。如果您按下 `Ctrl+C` 打开浏览器控制台，f12您将看到一个对象中包含来自 API 的数据{data}。
接下来，我们将在浏览器中显示这些笑话。
开始吧🚀🚀🚀……
//imports ....
const Joke = () => {
const [joke, setJokes] = useState([]);
const apiLink = "https://icanhazdadjoke.com/";
const fetchData = async () => {
const res = await axios.get(`${apiLink}`, { headers: { Accept: "application/json" } });
console.log(res.data.joke);
setJokes([res.data.joke]);
}
return (
<div className="joke__">
<h1>Jokes:</h1>
{/*Fetch data from url*/}
<button onClick={fetchData}>Load jokes</button>
{/*data from api goes here*/}
{joke && joke.map((j, index) => (
<div className="data" key={index}>
{j}
</div>
))}
</div>
)
}
export default Joke;
从上面的代码可以看出：
在该fetchData函数中，我们将状态设置为从 API 获取的每个笑话的响应setJokes([res.data.joke]);。在return语句中，我们将该fetchData函数传递给一个button，以便每次单击按钮时加载新的笑话<button onClick={fetchData}>Load jokes</button>。
以下代码如下所示：
我们正在遍历joke数组，看看是否有笑话，并从 API 返回该笑话div。
{/*data from api goes here*/}
{joke && joke.map((j, index) => (
<div className="data" key={index}>
{j}
</div>
))}
现在启动你的应用，你会看到Joke:一些Load jokes画面。点击Load jokes按钮后，就会显示新的笑话。它应该看起来像这样：
概括：
本文介绍了如何在 React 中使用 REST API。我们通过使用该GET方法从 API icanhazdadjoke.com获取数据，JSON然后将这些数据集成到我们的应用程序中。
你可以在推特上联系我@tkworldclass 😉
文章来源：https://dev.to/thankgod/using-a-rest-api-in-react-f6n