machinecat520
/
zj-Exercise


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Axios的配置对象</title>
    <!-- 引入axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>

    <button id="btn1">按钮1</button>
    <!-- <button id="btn2">按钮2</button> -->
    <script>
        //console.log(axios);
        document.getElementById("btn1").onclick = () =>{
            //直接调用axios发送请求
            //axios(config)
            axios({
                //baseURL：指定服务器的根目录（可以理解为是请求地址的前缀）
                baseURL:"http://localhost:3000",

                //请求地址
                url:"students",

                //请求方法，默认是get
                method:"post",

                //指定请求头（axios会自动判断，所以可以不用设置）
                //headers:{"Content-type":"application/json"}

                //请求体，会自动转换成json进行发送
                //或者以字符串的形式进行发送：
                //data:"name=唐僧&age=16"
                data:{
                    name:"唐僧",
                    age:18,
                    gender:"男",
                    address:"女儿国"
                },

                //params：用来指定路径中的查询字符串
                params:{
                    id:"1",
                    name:"swk"
                },

                //timeout：过期时间
                timeout:1000,

                //signal：用来终止请求，用法与fetch中的用法一样

                //transformRequest：可以用来处理请求数据（data）
                //它需要一个数组作为参数，数组可以接收多个函数，请求发送是多个函数会按照顺序执行
                //函数在执行时，会接收到两个参数data和headers
                //不常用，通常只在特殊情况下才使用
                // transformRequest:[function(data,headers){
                //     //console.log(data);
                //     //console.log(headers);
                //     //可以在函数中对data和headers进行修改
                //     data.name = "猪八戒"
                //     headers["Content-Type"] = "application/json"
                //     return data
                // },function(data,headers){
                //     //下一个函数的data和headers是上一个函数执行的结果，
                //     //如果上一个函数对data进行了修改，需要使用return返回，传给下一个函数
                //     //console.log(data);
                //     // console.log(headers);
                //     //最后一个函数必须返回一个字符串，才能使得数据有效
                //     return JSON.stringify(data)
                // }]

   
            }).then((res) =>{
                //res是axios封装过
                //console.log(res);
                console.log(res.data);
            }).catch((err) => {
                console.log("出错了",err);
            })

        }


    </script>
    
</body>
</html>