Ajax-16: Axios sends Ajax requests

axios CDN introduction link

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

axios GET request

const btns = document.querySelectorAll('button');
// 配置baseURL
axios.defaults.baseURL = 'http://localhost:8000';
btns[0].onclick = function() {
    
    
    axios.get('/axios-server',{
    
    
        // url参数
        params: {
    
    
            id: 666666,
            name: 'justin'
        },
        // 请求头信息
        headers: {
    
    
            color: "red"
        }
    }).then(value => {
    
    console.log(value);})
}

axios POST request

btns[1].onclick = function () {
    
    
    axios.post('/axios-server',{
    
    
        username: 'pink',
        password: 123456
    }, {
    
    
        // url参数
        params: {
    
    
            id: 999,
            school: 'Tsinghua'
        },
        // 请求头参数
        headers: {
    
    
            height: 600,
            weight: 300
        }
    })
}

• The first parameter is the URL
• The second parameter is the request body
• The third parameter is the request header parameter

Axios general function to send request

btns[2].onclick = function() {
    
    
    axios({
    
    
        // 请求方式
        method: 'POST',
        url: '/axios-server',
        // url参数
        params: {
    
    
            vip: 100,
            name: 'jusitn'
        },
        // 头信息
        headers: {
    
    
            a: 100,
            b: 30000
        },
        // 请求体参数
        data: {
    
    
            username: 'admin',
            password: 123456
        }
    }).then(value => {
    
    console.log(value);})
}