axios的基本使用

//使用默认方式发送无参请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./javascript/axios.min.js"></script>
    <title>Document</title>
</head>
<body>
<script>
    axios({//默认get请求
        url:'https://ai.taobao.com/',
    }).then(res=>{
        console.log(res);
    });
</script>
</body>
</html>

//axios发送get方式的有参请求【方式一】

<script>
    axios({
        url:'http://localhost:8080/student/getStudentById?id=1',
    }).then(res=>{
        console.log(res);
    });
</script>

//axios发送get方式的有参请求【方式二】

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

//使用post方式发送无参请求

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

//使用post方式发送有参请求【默认格式application/json】方式一

<script>
    axios({
        url:'http://localhost:8080/student/getStudentById',
        method:'post',
        data:{//后端接收为null,需要添加@RequestBody注解
            id:1,
            name:'zhangsan'
        },       
        headers: {'Content-Type': 'application/json'}
    }).then(res=>{
        console.log(res);
    });
</script>

<script>
    let formData = JSON.stringify(this.dataObj); //将vue实例对象转换成json字符串
    axios({
        url:'http://localhost:8080/student/getStudentById',
        method:'post',
        data:formData ,
        headers: {'Content-Type': 'application/json'}
    }).then(res=>{
        console.log(res);
    });
</script>

方式二

<script>
    axios({
        url:'http://localhost:8080/student/getStudentById',
        method:'post',
        params:{//url上拼接参数，后端可以接受参数
            id:1,
            name:'zhangsan'
        }
    }).then(res=>{
        console.log(res);
    });
</script>