如何在React中处理REST 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请求的非常简洁的了解。