React中Axios结合后端实现GET和POST请求详解

作者：晚风写码时间：2026-10-26 10:27:48浏览：254

本文详细介绍在React项目中如何使用Axios库与后端交互，涵盖GET和POST两种请求方式的具体实现。内容包含参数传递的两种GET方法、POST传递JSONObject的方式，以及Axios的全局配置与封装技巧。此外，针对开发中常见的跨域问题，提供了基于setupProxy.js的解决方案，帮助开发者快速完成前后端数据对接。

在React开发中，利用Axios库与后端服务进行数据交互是常见需求，主要涉及GET和POST两种请求方式。

GET与POST的主要区别在于安全性与效率：POST方法相对更安全，而GET方法通常响应更快。在实际应用中，若需传递单个参数，建议使用GET；若涉及多个参数，则推荐使用POST。

GET请求的第一种实现方式是将参数直接拼接在URL中。

前端代码示例

export function getAllSubstationsByUser() {
  return axios.get(`/api/integratedEnergy/all/${user}/substations`);
}

后端接收代码示例

   @RequestMapping(value = "/all/{user}/all/substations", method = RequestMethod.GET)
    public  ResponseEntity<List<Map<String, Object>>> getAllSubstationsByUserAreas(@PathVariable("user") String user) {
    String a = user;
    // todo 实现方法
}

GET请求的第二种实现方式是将参数作为JSON字符串附加在URL末尾。

前端代码示例

  const params = {
      user: 'admin',
    };
    
export function getAllSubstationsByUser(params) {
  return axios.get(`/api/integratedEnergy/all/substations`, { params });
}

后端接收代码示例

    @RequestMapping(value = "/all/substations", method = RequestMethod.GET)
    public ResponseEntity<List<Map<String, Object>>> getAllSubstationsByUserAreas(@RequestParam(value = "user", defaultValue = "") String user) {
        List<Map<String, Object>> mapList = new ArrayList<>();
        String a = user;
        // todo 实现方法
        return new ResponseEntity<>(mapList, HttpStatus.OK);
    }

POST请求的实现方式，主要用于传递JSONObject类型的参数。

前端代码示例

const params = { id: 'admin', name: '用户' }

export function getChildrenDevicesByParent(params) {
  return axios.post(`/api/integratedEnergy/all/child/devices`, params);
}

后端接收代码示例

   @RequestMapping(value = "/all/child/devices", method = RequestMethod.POST)
    public ResponseEntity<List<Map<String, Object>>> getStorageHistoryData(@RequestBody JSONObject params) {
    List<Map<String, Object>> mapList = new ArrayList<>();
    String id = params.getString("id").trim());
    String name = params.getString("name").trim());
    // todo 实现方法

    return new ResponseEntity<>(mapList, HttpStatus.OK);
    }

在React项目中，对Axios进行统一配置是优化请求管理的关键步骤。

对Axios请求进行封装，以便复用和统一管理。

第一步，通过npm安装axios库：npm I axios。

第二步，在项目根目录下创建server.js文件，并编写相关配置代码。

import axios from 'axios'
axios.defaults.baseURL = ''  //根据项目自己更改
//一些配置，发起请求和响应可以打印出来查看
axios.interceptors.request.use((config)=>{
    //这里是用户登录的时候，将token写入了sessionStorage中了，之后进行其他的接口操作时，进行身份验证。
    config.headers.token = localStorage.getItem("cookie");
    return config;
})
//在response中
axios.interceptors.response.use(config =>{
    return config;
})
const http = {
    post:'',
    get:'',
    getParams:''
}

http.post = function (api, data){  // post请求
    return new Promise((resolve, reject)=>{
        axios.post(api,data).then(response=>{
            resolve(response)
        })
    })
}
http.get = function (api, data){ // get请求
    return new Promise((resolve, reject)=>{
        axios.get(api,data).then(response=>{
            resolve(response)
        })
    })
}
http.getParams = function (api, param){ //get请求 需要传参
    return new Promise((resolve, reject)=>{
        axios.get(api, {params: param}).then(response => {
            resolve(response.data)
        }, err => {
            reject(err)
        }).catch((error) => {
            reject(error)
        })
    })
}

export default http

第三步，在具体的React组件中调用封装好的请求方法。

import http from '../../server';  // 首先引入server文件

http.get('api/接口名称').then(res => {
       console.log(res)
}).catch(error => {
       console.error(error)
})

在发起接口请求时，可能会遇到跨域问题，接下来介绍解决跨域的方法。

第一步，在项目根目录下创建setupProxy.js文件，并编写代理配置代码。

const proxy = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api',
    proxy.createProxyMiddleware({
      target: 'http://172.21.211.132:8000', // 后台服务地址以及端口号
      changeOrigin: true, // 是否跨域
      pathRewrite: {
        '^/api': '' // 路径重写,用/api代替target里的地址
      }
    })
  );
};