Axios 请求方式与后端接口的对应关系

一、GetMapping

@GetMapping("/getCompanyData")
@ResponseBody
public void getCompanyData(@RequestParam String systemType){
    System.out.println("get:  " + systemType);
}

前端只可以使用key-value对象的方式，且参数对象的key名称必须为params

axios.get('http://localhost:8080/getCompanyData', 
    {
    	params: {
        	systemType: 'get'
    	}
	}).then((res) => {
    	console.log(res);
	}).catch(function (error) {
    	console.error(error);
	});

二、PostMapping

2.1、后端使用 @RequestParam 接收具体的参数

@PostMapping("/getCompanyData")
@ResponseBody
public void getCompanyDataPost(@RequestParam String systemType){
    System.out.println("post:  " + systemType);
}

前端应使用FormData来组织请求参数，可以用于普通参数，也可以用于上传文件

var formData = new FormData();
formData.append('systemType', 'post');

axios.post('http://localhost:8080/getCompanyData', formData)
    .then((res) => {
    	console.log(res);
    }).catch(function (error) {
        console.error(error);
    });

2.2、后端使用 @RequestBody 接收对象

@PostMapping("/getCompanyData")
@ResponseBody
public void getCompanyDataPost(@RequestBody Object object){
    System.out.println(object);
}

前端应使用key-value对象来组织参数，且content-Type: 'application/json'

axios.post('http://localhost:8080/getCompanyData', 
	{
		systemType: 'post'
	}).then((res) => {
    	console.log(res);
    }).catch(function (error) {
    	console.error(error);
    });