axios简写get和post请求

使用axios.get方式发送无参请求

<script>
    axios.get('http://localhost:8080/student/getAllStudent').then(res=>{
        console.log(res.data);
    }).catch(err=>{
        console.log(err);
    });
</script>

　　

使用axios.get方式发送有参请求

<script>
    axios.get('http://localhost:8080/student/getStudentById',{params:{id:1,name:'zhangsan'}}).then(res=>{
        console.log(res);
    }).catch(err=>{
        console.log(err);
    });
</script>

　　

使用axios.post方式发送无参请求

<script>
    axios.post('http://localhost:8080/student/getAllStudent').then(res=>{
        console.log(res.data);
    }).catch(err=>{
        console.log(err);
    });
</script>

　　

使用axios.post方式发送有参请求【方式一】（这种方式后端controller的接口不需要加@RequestBody注解）

<script>
    axios.post('http://localhost:8080/getUser',"id=1&age=20&name=张三").then(res=>{
        console.log(res);
    }).catch(err=>{
        console.log(err);
    });
</script>

后端：(前端请求的参数名称必须与接口入参一致)

@CrossOrigin//允许跨域
@PostMapping("getUser")
public String getUser(int id,String age,String name){
        System.out.println(id);
        System.out.println(age);
        System.out.println(name);
        return "123";
}

　　

　

使用axios.post方式发送有参请求【方式二】（使用data传递数据，后端需要将axios自动转换的json字符串转换为java对象，方法上添加@RequestBody）

 

<script>　　
	queryUser:function(){
    　　 axios.post('http://localhost:8080/getUser',{id:this.user.id,name:this.user.name,age:this.user.age}).then(res=>{
        console.log(res);
		}).catch(err=>{
        console.log(err);
	});
</script>

　　

后端：

@CrossOrigin
@PostMapping("getUser")
public String getUser(@RequestBody User user){
　　System.out.println(user.getId());
　　System.out.println(user.getName());
　　System.out.println(user.getAge());
　　return "123";
 }

　　

携带header

<script>　
    　  let formData = JSON.stringify(this.obj);  
	queryUser:function(){
    　　 axios.post('http://localhost:8080/getUser',formData,{headers:{'Content-Type':'application/json'}}).then(res=>{
        console.log(res);
		}).catch(err=>{
        console.log(err);
	});
</script>