axios基本使用

岳泽以

发布于 2022-10-26 17:32:02

2540

发布于 2022-10-26 17:32:02

文章被收录于专栏：岳泽以博客岳泽以博客

中文官网：http://www.axios-js.com/zh-cn/

Axios是专注于网络数据请求的库。

相比于原生的XMLHttpRequest对象，axios简单易用。

相比于jQuery，axios更加轻量化，只专注于网络数据请求。

axios发起GET请求

语法：

axios.get('url',{params:{/*参数*/}}).then(callback)

示例：

        document.querySelector('#btn1').addEventListener('click', function () {
            var url = 'http://www.asd.com/api/get'
            var paramsObj = { name: 'zs', age: 20 }
            axios.get(url, { params: paramsObj }).then(function (res) {
                console.log(res.data);
            })
        })

axios发起POST请求

语法：

axios.get('url',{/*参数*/}).then(callback)

示例：

        document.querySelector('#btn2').addEventListener('click', function () {
            var url = 'http://www.asd.com/api/post'
            var dataaObj = { address: '北京', location: '顺义区' }
            axios.post(url, dataaObj).then(function (res) {
                console.log(res.data);
            })
        })

直接使用axios发起请求

axios也提供了类似于jQuery中 $.ajax()的函数，语法如下：

axios({
    method:'请求类型',
    url:'请求的URL地址',
    data:{/*POST数据*/},
    params:{/*GET参数*/}
}).then(callback)

直接使用axios发起GET请求

        axios({
            method: 'GET',
            url: 'http://www.asd.com/api/get',
            params: {//GET参数要通过params属性提供
                name: 'zs',
                age: 20
            }
        }).then(function (res) {
            console.log(res.data)
        })

直接使用axios发起POST请求

         axios({
                method: 'POST',
                url: 'http://www.asd.com/api/post',
                data: {//POST数据要通过data属性提供
                    bookname: 'JavaScript从入门到放弃',
                    price: 888
                }
            }).then(function (res) {
                console.log(res.data);
            })

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022 年 09 月，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery