react中axios怎么结合后端实现GET和POST请求

概述

在前端开发过程中，我们常常需要与后端进行通信来获取、提交数据等各种操作。而现代化的前端框架可以通过使用类库和插件来快速实现与后端的数据交互。其中，axios是一个优秀的前端HTTP请求库，可以方便地实现前后端数据交互。 本篇文章将结合React和axios，介绍如何在前端中实现GET和POST请求，并让后端对应地进行响应。我们使用React的Class Component来进行演示，但也适用于函数组件。

基础知识

在开始介绍具体的实现了，我们先简单介绍一下几个基本知识。

React Class组件的使用

我们可以使用ES6的class语法，来实现React Class组件。它类似于普通的JavaScript类，但添加了React组件的生命周期函数，从而方便开发人员在合适的时机做出相应操作。 例如，下面是一个React Class组件的基本结构：

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: ''
    }
  }
  
  componentDidMount() {
    // 在组件加载后调用
  }
  
  componentDidUpdate() {
    // 在更新后调用
  }
  
  componentWillUnmount() {
    // 在组件卸载前调用
  }
  
  render() {
    return (
      

        {this.state.data}
      
    );
  }
}

export default MyComponent;

在上述例子中，我们定义了一个MyComponent组件，它有一个状态data，初始为空字符串。组件的render函数返回一个div组件，其中渲染了this.state.data。当组件挂载到页面上后，会依次调用constructor和componentDidMount函数，完成组件初始化和对后端接口的数据请求。

axios的使用

axios是一个基于promise的HTTP客户端，可以用在浏览器和node.js中，它支持所有现代浏览器，这也是它越来越受欢迎的原因之一。使用axios发送GET和POST请求，通常需要指定请求的URL和一些额外的参数。 例如，下面是一个使用axios发送GET请求的基本示例：

axios.get('/user', {
  params: {
    ID: 12345
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

在上述例子中，我们使用axios.get函数发送一个GET请求到/user接口，同时传递ID参数。当请求成功时，通过.then回调函数获取响应数据，当请求失败时，通过.catch回调函数获取错误信息。 axios.post函数的使用方法类似。

使用实例

以下我们通过一个实例，来演示如何在React中结合axios实现GET和POST请求。

示例需求

假设我们需要在页面上显示一个用户列表，列表中包含每个用户的姓名和年龄，同时我们需要实现排序和筛选功能。从后端获取的数据为JSON格式，其中包含多个用户的信息。 当点击“排序”按钮时，我们需要按照年龄升序或者降序排列用户列表。当输入年龄的筛选条件后，我们需要根据条件过滤用户列表。

界面实现

在React中，我们通常将界面组件与业务数据进行区分，分别定义为Component和Container两种类型。在本例中，我们将UI组件定义为UserList组件，并使用类似于下面的代码实现：

import React from 'react';

class UserList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [],
      filter: '',
      sortBy: 'ASC'
    };
  }
  
  componentDidMount() {
    this.fetchData();
  }
  
  fetchData() {
    axios.get('/api/users')
      .then(response => this.setState({ users: response.data }))
      .catch(error => console.log(error));
  }
  
  handleSort = () => {
    const { sortBy, users } = this.state;
    
    const sortedUsers = users.sort((u1, u2) => {
      let age1 = parseInt(u1.age);
      let age2 = parseInt(u2.age);
      if (sortBy === 'ASC') {
        return age1 - age2;
      } else {
        return age2 - age1;
      }
    });
    
    this.setState({ users: sortedUsers, sortBy: (sortBy === 'ASC') ? 'DESC' : 'ASC' });
  }
  
  handleFilter = (e) => {
    const { value } = e.target;
    this.setState({ filter: value });
  }
  
  render() {
    const { users, filter } = this.state;
    
    const filteredUsers = users.filter(user => user.age.includes(filter));
    
    return (
      <>
        

          Filter:
          
        
        

          Sort By Age
        
        
            {filteredUsers.map(user => (
              
            ))}
          

          

            

              
Name
              
Age
            
          
          

                
{user.name}
                
{user.age}
              
        
      
    );
  }
}

export default UserList;

在上述代码中，我们定义了一个名为UserList的UI组件，其中使用了constructor、componentDidMount和render等React组件的生命周期函数。componentDidMount函数在组件挂载后调用，负责调用后端接口并更新组件状态。 handleSort和handleFilter函数用于响应页面按钮和输入框的交互事件，根据需求对数据做出相应的处理。最后，render函数返回虚拟DOM，实现用户列表的展示。

后端实现

我们的后端接口使用Node.js的Express框架来实现，使用了json-server来模拟数据接口。具体示例代码如下：

const express = require('express');
const cors = require('cors');
const jsonServer = require('json-server');

const app = express();
const router = jsonServer.router('db.json');
const middlewares = jsonServer.defaults();

app.use(cors());
app.use(middlewares);

app.get('/', (req, res) => {
  res.send('Hello World');
});

app.use('/api', router);

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

在上述代码中，我们定义了一个基于Express的HTTP服务器，监听在3000端口。当客户端发送GET或者POST请求时，服务器将通过中间件json-server，将请求路径映射到json格式的模拟数据库上。我们可以在db.json文件中定义模拟数据格式，例如：

{
  "users": [
    { "id": 1, "name": "John", "age": "20" },
    { "id": 2, "name": "Jane", "age": "22" },
    { "id": 3, "name": "Tom", "age": "25" },
    { "id": 4, "name": "Tony", "age": "18" },
    { "id": 5, "name": "Alex", "age": "30" }
  ]
}

以上就是我们整个系统的基本实现过程，页面的数据展示和后端的数据响应都已经完成。当用户在前端界面操作时，前端将通过axios向后端发送请求，在符合条件的情况下，后端将返回响应的数据或状态码等信息。通过这种方式，前后端之间实现了完整的数据交互过程。

总结

本文介绍了在React中如何结合axios实现前后端数据交互。我们通过一个例子，演示了如何获取后端数据、实现排序和筛选功能等场景。同时，我们也介绍了React组件和axios的基本用法，以及服务器端Express框架的使用。通过内容详实的细节讲解，相信读者已经对此类前后端结合的业务开发有了一定的认识和掌握。