Ajax速通（四）——axios_axios 客户端证书-优快云博客

本文链接：https://blog.youkuaiyun.com/yihen0214/article/details/120397211

axios

服务端代码

const { request, response } = require('express');
const expres=require('express');
const app=expres();
// axios服务
app.all('/axios-server',(request,response)=>{
    // 设置响应头,设置允许跨域
    response.setHeader('Access-Control-Allow-Origin',"*");
    response.setHeader('Access-Control-Allow-Headers',"*");
    // 设置响应体
    const data= {name: '懿痕'};  
    // response.send('HELLO   JQuery ');
    response.send(JSON.stringify(data));

});
//  4. 监听端口，启动服务
app.listen(8000,()=>{
    console.log('服务已经启动,8000端口监听中.....')
})

客户端代码

<!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 发送 AJax请求</title>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
</head>

<body>
    <button>GET</button>
    <button>POST</button>
    <button>AJAX</button>
</body>
<script>
    const btns = document.querySelectorAll('button');
    // 配置 baseURL,简化路径
    axios.defaults.baseURL = 'http://127.0.0.1:8000';
    btns[0].onclick = function () {
        // GET 
        axios.get('/axios-server', {
            // url参数
            params: {
                id: 100,
                vip: 8
            },
            // 请求头信息
            headers: {
                name: 'yihen',
                age: 18
            } 
        }).then(value => { console.log(value) });
    }
    btns[1].onclick = function () {
        // 第二个参数为请求体，单独弄出来
        axios.post('/axios-server', {
            username: 'admin',
            userpassword: '123456'
        }, {
            params: {
                id: 2000,
                vip: 11
            },
            headers: {
                height: 180,
                weight: 120,
            },


        })
    }

    btns[2].onclick=function(){
        axios({
            // 请求方法
            method :'POST',
            // url
            url:'/axios-server',
            // url参数
            params:{
                vip:18,
                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);
            // 响应体
            console.log(response.data);
        })
    }
</script>

</html>