如何在 React 中处理 REST API 请求
REST API通常用于Web开发中。它们是Web应用程序用来彼此“交谈”的编程接口。它们用于访问功能部件和数据。“ REST”（代表性状态转移）是定义API属性的概念。本文将重点介绍如何使用基于Web的API从数据库中检索数据。
Axios是一个npm软件包，允许应用程序将HTTP请求发送到Web API。要在您的React应用程序中使用Axios，请使用以下命令：
npm install axios
要么
yarn add axios
在创建react组件之前，请按照以下步骤将React和Axios导入文件：
import React from 'react';
import axios from 'axios';
在React生命周期方法'componentWillMount'中利用了Axios请求。尽管此方法从那时起已过时，但在撰写本文时仍可使用。它将一直持续到React 17发行。在需要异步渲染时，使用它并不安全。应当使用“ componentDidMount”方法代替它。
该方法在组件更新到DOM之后运行，是注册API调用的好地方。到目前为止的基本结构如下：
class YourComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
posts: []
}
}
componentDidMount() {
// Your axios request here
}
render() {
return (
// Your jsx goes here
);
}
}
Axios请求具有以下基本结构：
axios({ method: 'http request method', url: 'Api url' });
如上所示，基本请求将对象作为参数。在该对象中，指定了方法和URL密钥。HTTP请求方法类型和API URL被设置为它们各自的值。
GET请求
考虑到这种基本模式，Axios GET请求将如下所示：
const apiUrl = '你的api地址';
axios({ method: 'get', url: `${apiUrl}` });
当API收到请求并处理请求时，将发送响应。该组件需要先以某种方式处理接收到的数据，然后才能在应用程序中使用它。在此示例中，我们在状态中定义了一个名为“ posts”的键，并将其设置为一个空数组。Axios请求是异步的。我们需要通过将“ then”链接到请求的末尾来处理响应。
在then块中，我们可以如下更新组件的状态：
axios({ method: 'get', url: `${apiUrl}` })
.then(response => {
this.setState({
posts: response.data
})
});
（PS。如果我们将redux用于状态管理，则可以在'then'块中调用调度函数。这样，我们可以将响应数据保存在redux存储中）。
POST请求
对于典型的POST请求，数据将与API请求一起传递。该数据通常可以驻留在组件的状态或Redux存储中。通常，用户希望发布到数据库的数据是从表单获得的。我们将使用handleChange函数更新组件的状态。我们的Axios请求将在handleSubmit函数中发出。
提交表单后，POST请求将发送到API。可以按以下步骤完成：
class YourComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
post: ''
}
}
handleChange(e) {
const { value } = e.target;
this.setState({
post: value
});
}
handleSubmit(e) {
e.preventDefault();
const { post } = this.state;
axios({
method: 'post',
url: `${apiUrl}/posts`,
data: post
})
}
render() {
return (
// Your form resides here
);
}
}
删除请求
DELETE请求类似于POST请求。它们是通过与视图中的按钮交互来完成的。在这种情况下，当单击“删除”按钮时，可以使用handleClick函数发出请求。可以按以下步骤完成：
class YourComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
posts: [
{
id: 1,
content: 'The first post'
}
]
}
this.handleClick = this.handleClick.bind(this);
}
handleClick(e) {
e.preventDefault();
const { id } = e.target;
const apiUrl = '你的api地址';
axios({
method: 'delete',
url: `${apiUrl}/posts/${id}`
})
}
render() {
const { posts } = this.state;
return (
<div>
{posts.map(post => (
<div key={post.id}>
<p>{post.content}</p>
<div>
<input
type="button"
id={post.id}
value="Delete"
onClick={this.handleClick}
/>
</div>
</div>
))}
</div>
);
}
}
单击按钮后，将DELETE请求发送到api，并从数据库中删除帖子。为了将此反映在前端，必须发送另一个GET请求以更新组件的状态。
JWT的请求
JWT（JSON Web令牌）可用于对基于Web的应用程序中的用户进行身份验证。这些令牌通常是通过将POST请求发送到正确配置的API来生成的。令牌生成后，将它们存储起来以通过localStorage使用。在这种情况下，令牌将需要构成发出的HTTP请求的一部分。
为了说明这一点，我们将回顾GET请求示例：
const apiUrl = '你的api地址';
const token = `Bearer ${localStorage.getItem('jwt')}`;
axios({
method: 'get',
url: `${apiUrl}`,
headers: { Authorization: token }
});
令牌作为传递给Axios调用的对象参数中的另一个键传递。可以通过类似的方式更改POST和DELETE请求，并通过“标头”密钥传递令牌。
那里有。这是对React前端组件中Axios请求的非常简洁的了解。
无评论