526互联

axios-基于axios get和axios post发起请求

发布时间 2023-06-14 00:27:49作者: Young_Yang_Yang
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<button id="btnPost">发起POST请求</button>
<button id="btnGet">发起GET请求</button>
<button id="btnGET1">GET</button>
<button id="btnPOST1">POST</button>
<script src="axios.js"></script>
<script>
    document.querySelector('#btnPost').addEventListener('click', async function () {
        // 如果调用某个方法的返回值是Promise实例，则前面可以添加await！
        // await只能用在被async修饰的方法中
        const result = await axios({
            method: 'POST',
            url: '/axios/post',
            data: {
                name: 'zs',
                age: 20
            }
        })
        console.log(result)
    })

    document.querySelector('#btnGet').addEventListener('click', async function () {
        // 如果调用某个方法的返回值是Promise实例，则前面可以添加await！
        // await只能用在被async修饰的方法中
        const {data: res} = await axios({
            method: 'GET',
            url: '/axios/get',
            data: {
                name: 'zs',
                age: 20
            }
        })
        console.log(res)
    })

    document.querySelector('#btnGET1').addEventListener('click', async function () {
        // axios.get('/axios/get', {
        //     params: {id:1}
        // })
        const {data: res} = await axios.get('/axios/get')
        console.log(res)
    })

    document.querySelector('#btnPOST1').addEventListener('click', async function () {
        //axios.post('url', {/* POST请求体数据 */})
        const {data: res} = await axios.post('/axios/post', {id: 1})
        console.log(res)
    })
</script>
</body>
</html>