SoFunction
Updated on 2025-03-06

Axios combines the backend to implement GET and POST request methods in react

react axios combined with backend to implement GET and POST requests

The difference is not introduced here. The POST method is slightly safer than the GET method. The GET method is faster than the POST method. I personally feel that passing a single parameter is GET, and passing multiple parameters is POST.

Get implementation method 1 (parameters are directly in the url)

  • front end
export function getAllSubstationsByUser() {
  return (`/api/integratedEnergy/all/${user}/substations`);
}
  • rear end
   @RequestMapping(value = "/all/{user}/all/substations", method = )
    public  ResponseEntity<List<Map<String, Object>>> getAllSubstationsByUserAreas(@PathVariable("user") String user) {
    String a = user;
    // todo implementation method}

get time mode 2 (as JSONString followed at the end of the url)

  • front end
  const params = {
      user: 'admin',
    };
    
export function getAllSubstationsByUser(params) {
  return (`/api/integratedEnergy/all/substations`, { params });
}
  • rear end
    @RequestMapping(value = "/all/substations", method = )
    public ResponseEntity<List<Map<String, Object>>> getAllSubstationsByUserAreas(@RequestParam(value = "user", defaultValue = "") String user) {
        List<Map<String, Object>> mapList = new ArrayList<>();
        String a = user;
        // todo implementation method        return new ResponseEntity<>(mapList, );
    }

Post implementation (passing JSONObject)

  • front end
const params = { id: 'admin', name: 'user' }

export function getChildrenDevicesByParent(params) {
  return (`/api/integratedEnergy/all/child/devices`, params);
}
  • rear end
   @RequestMapping(value = "/all/child/devices", method = )
    public ResponseEntity<List<Map<String, Object>>> getStorageHistoryData(@RequestBody JSONObject params) {
    List<Map<String, Object>> mapList = new ArrayList<>();
    String id = ("id").trim());
    String name = ("name").trim());
    // todo implementation method
    return new ResponseEntity<>(mapList, );
    }

react project axios request configuration

axios request encapsulation

1. Install npm I axios

2. First, create the file content in the root directory as follows

import axios from 'axios'
 = ''  //Change it according to the project//Some configurations, initiating requests and responses can be printed and viewed((config)=>{
    //This is when the user logs in, writes the token into sessionStorage, and then performs authentication when other interface operations are performed.     = ("cookie");
    return config;
})
//In response(config =>{
    return config;
})
const http = {
    post:'',
    get:'',
    getParams:''
}
 = function (api, data){  // Post request    return new Promise((resolve, reject)=>{
        (api,data).then(response=>{
            resolve(response)
        })
    })
}
 = function (api, data){ // get request    return new Promise((resolve, reject)=>{
        (api,data).then(response=>{
            resolve(response)
        })
    })
}
 = function (api, param){ //Get request requires a parameter    return new Promise((resolve, reject)=>{
        (api, {params: param}).then(response => {
            resolve()
        }, err => {
            reject(err)
        }).catch((error) => {
            reject(error)
        })
    })
}

export default http

3. Use in components

import http from '../../server';  // First introduce the server file
('api/interface name').then(res => {
       (res)
}).catch(error => {
       (error)
})

At this time, we encounter cross-domain problems when requesting the interface. Let's tell you how to solve cross-domain

1. Create the file content in the root directory as follows

const proxy = require('http-proxy-middleware');
 = function(app) {
  (
    '/api',
    ({
      target: 'http://172.21.211.132:8000', // Background service address and port number      changeOrigin: true, // Whether to cross domain      pathRewrite: {
        '^/api': '' // Path rewrite, use /api instead of the address in the target      }
    })
  );
};

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.