如何在React中处理REST API请求

Posted 2021-03-03

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请求的非常简洁的了解。

参考资料：
https://www.objectx.cn/thread-75-1-1.html