react取消所有请求_如何在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 (

{posts.map(post => (

{post.content}

type="button"

id={post.id}

value="Delete"

onClick={this.handleClick}

/>

))}

);

}

}

单击按钮后，将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请求的非常简洁的了解。