fetch，axios 发送请求

1.使用nodemon自动启动工具启动模拟的服务器

//运行服务器

nodemon server.js

// axios服务
app.all('/axios-server',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers','*');
    // 响应一个数据
    const data = {
        name:'加油~'
    }
    // 对对象进行字符串转换
    let str = JSON.stringify(data);
    response.send(str);
});

引入在线的axios包

<script crossorigin="anonymous"  src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.js"></script>`

axios的发送AJAX请求

 const btns = document.querySelectorAll('button');
        // 配置 baseURL
        axios.defaults.baseURL = 'http://127.0.0.1:8000';
        // GET请求
        btns[0].onclick = function(){
            axios.get('/axios-server',{
                // url参数
                params:{
                    id:100,
                    vip:7
                },
                // 请求头信息
                headers:{
                    name:'lily',
                    age:'20'
                }
            }).then(value=>{
                console.log(value);
            })
        }
        // POST请求
        btns[1].onclick = function(){
            axios.post('axios-server',{
                // 请求体
                data:{
                    username:'admin',
                    password:'admin'
                },
                // URL参数
                params:{
                    id:200,
                    vip:8
                },
                // 请求头信息
                headers:{
                    name:'tony',
                    age:18
                }
            }).then(value=>{
                console.log(value);
            })
        }
          
        btns[2].onclick = function(){
        //Axios请求
            axios({
                // 请求方法
                method:'POST',
                //URL
                url:'/axios-server',
                //URL参数
                params:{
                    vip:10,
                    level:30
                },
                // 头信息
                headers:{
                    a:100,
                    b:200
                },
                // 请求体参数
                data:{
                    username:'admin',
                    password:'admin'
                }
            }).then(Response=>{
                console.log(Response);
                console.log(Response.status);
                console.log(Response.statusText);
                console.log(Response.headers);
            })

        }
    </script>

fetch发送请求

then方法返回的是一个promise方法

 const btn = document.querySelector('button');

        btn.onclick = function(){
            fetch('http://127.0.0.1:8000/fetch-server?vip=10',{
                // 请求方法
                method:'post',
                // 请求头
                headers:{
                    name:'lily',
                },
                // 请求体
                body: 'username = admin && password = admin',
            }).then(response =>{
                // 获取数据
                return response.json();
                // return response.text();
            }).then(response=>{
                console.log(response);
            });
        }