axios

axios是一个专注于网络请求的库

axios语法如下：

axios({
    method:'请求的类型',
    url:’请求的URL地址',
}).then(result)=>{
    //.then 用来指令请求成功之后的回调函数
    //形参中的result是请求成功之后的结果
}）

axios的基本使用

1.发起get请求：

    <script>
        //1.调用axios方法得到的返回值是Promise对象
        axios({
            //请求方式
            method:'GET',
            //请求的地址
            url:'http://www.liulongbin.top:3006/api/getbooks',
            //URL中的查询参数，//GTE传参用params，POST传参用data
            params:{id:1},
        }).then(function(result){
            console.log(result.data)
        })
    </script>

2.发起post请求

<!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>Document</title>
</head>
<body>
    <script src="./lib/axios/dist/axios.js"></script>
    <script>
        //console.log(axios)
        //http://www.liulongbin.top:3006/api/getbooks

        //调用axios方法得到的返回值是Promise对象
        axios({
            //请求方式
            method:'GET',
            //请求的地址和axios返回值调用
            url : 'http://www.liulongbin.top:3006/api/getbooks',
        }).then(function(books){
            console.log(books.data)
        })
    </script>
    <!-- <script>
        //1.调用axios方法得到的返回值是Promise对象
        axios({
            //请求方式
            method:'GET',
            //请求的地址
            url:'http://www.liulongbin.top:3006/api/getbooks',
            //URL中的查询参数，//GTE传参用params，POST传参用data
            params:{id:0},
            //请求体参数
            //data:{}
        }).then(function(result){
            console.log(result.data)
        })
    </script> -->
    <button id="btnPost">发起POST请求</button>
    <button id="btnGet">发起get请求</button>
    <script>
        document.querySelector('#btnPost').addEventListener('click',async function(){
            //1.调用axios方法得到的返回值是Promise对象
            //如果调用某个方法的返回值是Promise对象，则前面可以添加 await
            // awiait只能用在被async 修饰的方法中
            const result = await axios({
                //请求方式
                method:'PSOT',
                //请求的地址
                url:'https://www.liulongbin.top:3006/api/post',
                //URL中的查询参数，//GTE传参用params，POST传参用data
                //请求体参数
                data:{
                    name:'zs',
                    age:20
                }
            })
        })

    </script>
    <script>
        document.querySelector('#btnGet').addEventListener('click',async function(){
            //1.调用axios方法得到的返回值是Promise对象
            //如果调用某个方法的返回值是Promise对象，则前面可以添加 await
            // awiait只能用在被async 修饰的方法中
            const {data:res} = await axios({
                //请求方式
                method:'GTE',
                //请求的地址
                url:'http://www.liulongbin.top:3006/api/getbooks',
                //URL中的查询参数，//GTE传参用params，POST传参用data
            })
            console.log(res.data)
        })

    </script>

</body>
</html>
View Code

 3.直接发起get请求和post请求

<!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>Document</title>
</head>
<body>
    <script src="./lib/axios/dist/axios.js"></script>
    <button id="btnGet">发起Get请求</button>
    <button id="btnPost">发起Post请求</button>
    <script>
        document.querySelector('#btnGet').addEventListener('click',async function(){
            const {data:res} = await axios.get(
                'http://www.liulongbin.top:3006/api/getbooks'
            )
            console.log(res.data)
        })
        document.querySelector('#btnPost').addEventListener('click',async function(){
            const {data:res} = await axios.post('https://uatnewapi.hezongyy.com/users/UserLogin/login',{
                    "username":"冷亮小号",
                    "password":"a123456",
                    "channel":1,
                    "timeout":604800,
                    "fingerprint":"cb7b467ac299d8666f6a5a47d22f0710"
                })
            console.log(res.content)
        })
        
    </script>
</body>
</html>
View Code

 

posted @ 2022-09-13 08:12  Funkyd  阅读(88)  评论(0)    收藏  举报