如何通過axios發(fā)起Ajax請(qǐng)求(最新推薦)

更新時(shí)間：2022年11月17日 09:24:59 作者：堅(jiān)毅的小解同志

Axios是專注于網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求的庫(kù)，相比于原生的XMLHttpRequest對(duì)象，axios簡(jiǎn)單易用。相比于Jquery，axios更加輕量化，只專注于網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求，這篇文章主要介紹了如何通過axios發(fā)起Ajax請(qǐng)求,需要的朋友可以參考下

axios

什么是axios

Axios是專注于網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求的庫(kù)，相比于原生的XMLHttpRequest對(duì)象，axios簡(jiǎn)單易用。相比于Jquery，axios更加輕量化，只專注于網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求。

axios發(fā)起GET請(qǐng)求

axios發(fā)起get請(qǐng)求的語(yǔ)法：

在這里插入圖片描述

代碼

<body>
    <button id="btn1">發(fā)起get請(qǐng)求</button>
    <script>
        document.querySelector('#btn1').addEventListener('click', function () {
            let url = 'http://www.liulongbin.top:3006/api/get';
            axios.get(url, { params: { name: 'xiaoxie', age: '20' } }).then(function (res) {
                console.log(res.data);
            })
        })
    </script>
</body>

在這里插入圖片描述

axios發(fā)起POST請(qǐng)求

axios發(fā)起post請(qǐng)求的語(yǔ)法

在這里插入圖片描述

 <button id="btn2">發(fā)起post請(qǐng)求</button>
  document.querySelector('#btn2').addEventListener('click', function () {
            let url = 'http://www.liulongbin.top:3006/api/post';
            axios.post(url, { name: 'xiaoxie', age: '20' }).then(function (res) {
                console.log(res.data);
            })
        })

在這里插入圖片描述

直接使用axios發(fā)起get請(qǐng)求

axios也提供了類似于Jquery中$.ajax()的函數(shù)，語(yǔ)法如下：

在這里插入圖片描述

<body>
    <button id="btn3">發(fā)起ajax請(qǐng)求</button>
    <script>
        document.getElementById('btn3').addEventListener('click', function () {
            let url = 'http://www.liulongbin.top:3006/api/get';
            let paramsData = {
                name: 'xiaoxie',
                age: 20
            }
            axios({
                method: 'get',
                url: url,
                params: paramsData,
            }).then(
                function (res) {
                    console.log(res.data);
                }
            )
        })
    </script>
</body>

在這里插入圖片描述

直接使用axios發(fā)起post請(qǐng)求

<body>
    <button id="btn4">發(fā)起ajax post請(qǐng)求</button>
        document.getElementById('btn4').addEventListener('click', function () {
            let url = 'http://www.liulongbin.top:3006/api/post';
            let paramsData = {
                name: 'xiaoxie',
                age: 20
            }
            axios({
                method: 'post',
                url: url,
                data: paramsData,
            }).then(
                function (res) {
                    console.log(res.data);
                }
            )
        })
    </script>
</body>

在這里插入圖片描述