使用 axios 在 React 中进行网络请求

Axios 是一款基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 环境下发送 HTTP 请求。

React 是一款流行的 JavaScript 库，用于构建用户界面。

本文将介绍使用 Axios 在 React 中进行网络请求的基本知识。我们将从安装 Axios 开始，并了解如何使用它来请求远程数据，并将其与 React 的生命周期方法结合使用。

安装 Axios

在 React 中使用 Axios 首先需要安装它。可以使用 npm 或者 yarn 来安装 Axios。在您的项目中执行以下命令：

npm install axios
# 或者
yarn add axios

发送 GET 请求

让我们从一个简单的 GET 请求开始。

我们将创建一个名为 UserList 的组件，用于在浏览器中显示用户列表。此组件将从 API 中获取用户数据。

我们假设 API 端点的 URL 为 https://example.com/users，返回的数据是 JSON 格式的。我们希望在组件加载时发送 GET 请求，并将响应中的数据存储在组件状态中。我们可以使用 componentDidMount 生命周期方法来做到这一点。

import React, { Component } from "react";
import axios from "axios";

class UserList extends Component {
  state = {
    users: []
  };

  async componentDidMount() {
    const response = await axios.get("https://example.com/users");
    this.setState({ users: response.data });
  }

  render() {
    const { users } = this.state;

    return (
      <div>
        {users.map((user) => (
          <div key={user.id}>{user.name}</div>
        ))}
      </div>
    );
  }
}

export default UserList;

上面的代码创建一个名为 UserList 的 React 组件。在组件的生命周期方法 componentDidMount 中，我们发送一个 GET 请求到 API 端点，并使用响应中的数据更新组件的状态。在渲染组件时，我们使用 map 方法遍历状态中的 users 数组，并显示每个用户的名称。

发送 POST 请求

让我们继续发送一个 POST 请求，并在响应中显示用户详情。

我们将创建一个名为 UserForm 的组件，用于在浏览器中创建新用户。此组件将向 API 端点 https://example.com/users 发送 POST 请求，以创建一个新用户，并将响应中的用户详情存储在组件状态中。

import React, { Component } from "react";
import axios from "axios";

class UserForm extends Component {
  state = {
    name: "",
    email: "",
    address: "",
    phone: ""
  };

  handleChange = (event) => {
    this.setState({ [event.target.name]: event.target.value });
  };

  handleSubmit = async (event) => {
    event.preventDefault();
    const { name, email, address, phone } = this.state;
    const response = await axios.post("https://example.com/users", {
      name,
      email,
      address,
      phone
    });
    this.setState({ user: response.data });
  };

  render() {
    const { name, email, address, phone } = this.state;

    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          name="name"
          placeholder="Name"
          value={name}
          onChange={this.handleChange}
        />
        <input
          type="text"
          name="email"
          placeholder="Email"
          value={email}
          onChange={this.handleChange}
        />
        <input
          type="text"
          name="address"
          placeholder="Address"
          value={address}
          onChange={this.handleChange}
        />
        <input
          type="text"
          name="phone"
          placeholder="Phone"
          value={phone}
          onChange={this.handleChange}
        />
        <button type="submit">Create User</button>
        {this.state.user && (
          <div>
            <hr />
            <h3>{this.state.user.name}</h3>
            <p>{this.state.user.email}</p>
            <p>{this.state.user.address}</p>
            <p>{this.state.user.phone}</p>
          </div>
        )}
      </form>
    );
  }
}

export default UserForm;

上面的代码创建一个名为 UserForm 的 React 组件。在组件中，我们处理 name、email、address 和 phone 状态值的变化，并使用 handleSubmit 方法向 API 发送一个 POST 请求。在渲染组件时，我们呈现一个包含表单的 form 元素，当用户提交表单时，调用 handleSubmit 方法。如果创建用户成功，则将响应中的用户详情存储在组件状态中，并将其呈现在页面上。

结论

Axios 是一个功能-rich 的库，并且能轻松地与 React 集成。使用 Axios 和 React，您可以让您的应用程序轻松地从 API 中获取数据，并对 API 进行增删改查操作。本文中的示例仅仅是入门级别，还有更多内容可以探索。