axios的简单使用

标题axios的使用

axios官网文档

get请求

浏览器端

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
    <script>
        // 获取对象
        const btns = document.querySelectorAll('button');
        //配置 baseURL
        axios.defaults.baseURL = 'http://127.0.0.1:8000'

        // 绑定事件
        btns[0].onclick = function(){
            // GET  请求
            axios.get('/axios',{
                // url  发送的请求参数
                params:{
                    id:100,
                    vip:7
                }
                // ,
                // //  请求头信息
                // headers:{
                   
                //     age:20
                // }
            }).then(value =>{
                console.log(value);
            })
        }

    </script>

服务器端

// 6，axios服务响应
app.all('/axios', (request, response) => {
    // 设置响应头，即请求头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    let obj = {
        name:'xiaoai',
        age :18
    }
    response.send(JSON.stringify(obj));
    
})

POST请求

浏览器端

// 绑定事件
        btns[1].onclick = function(){
            // POST  请求
            axios.post('/axios',{
                // 这里可以放请求体
                username:'admin',
                password:'admin'
            },{
                // url  发送的请求参数
                params:{
                    id:100,
                    vip:7
                }
                // ,
                // //  请求头信息
                // headers:{
                   
                //     age:20
                // }
            }).then(value =>{
                console.log(value);
            })
        }

axios使用axios函数发送通用方法，发送请求

浏览器端

 btns[2].onclick = function(){
            // 通过axios函数发送通用的请求
           
            axios({
                 // 请求方法
                method:'POST',
            // 请求url地址
            url:'/axios',
            // url地址请求参数
            params:{
                vip:10 ,
                level:10
            },
            // 头信息
            headers:{
                a:100,
                b:200
            },
            // 请求体参数
            data:{
                username:'admin',
                password:'admin'
            }
            }).then(response=>{
                // 通过then方法，因为axios函数返回的结果是一个promise异步对象
                // 所以可以通过then方法的第一个回调函数获取到请求的响应对象
                console.log(response);
                // 响应的状态码
                console.log(response.status);
                // 响应状态字符串
                console.log(response.statusText);
                // 响应头信息
                console.log(response.headers);
                //响应体
                console.log(response.data);





            }) 
           

        }