【Ajax学习】axios

1 什么是axios

Axios是专注于网络数据请求的库。
相比于原生的XMLHttpRequest 对象，axios简单易用。

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

2 axios发起GET请求

axios 发起get 请求的语法:

 <button id="btn1">点击发起get请求</button>
    <script>
        document.querySelector("#btn1").addEventListener('click', function(){
            var url = 'http://www.liulongbin.top:3006/api/get';
            var paramsObj = {name: 'zs', age: 20};
            axios.get(url, {params: paramsObj}).then(function(res){
                console.log(res);
            })

        })
    </script>

3 axios发起POST请求

axios发起post请求的语法:

document.querySelector("#btn2").addEventListener('click', function(){
            var url = 'http://www.liulongbin.top:3006/api/post';
            var paramsObj = {name: 'fghjk', age:2345};
            axios.post(url, {params: paramsObj}).then(function(res){
                console.log(res.data);
            })
        })

4 直接使用axios发起请求

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

1、直接使用axios发起GET请求

get要通过params属性提交参数。

document.querySelector("#btn3").addEventListener('click', function(){
            var url = 'http://www.liulongbin.top:3006/api/get';
            var paramsObj = {name: 'gangtiexia', age: 5000};
            axios({
                method: 'get',
                url: url,
                params: paramsObj
            }).then(function(res){
                console.log(res.data);
            })
        })

2、直接使用axios发起POST请求

post要通过data属性传递数据

document.querySelector("#btn4").addEventListener('click', function(){
            var url = 'http://www.liulongbin.top:3006/api/post';
            var paramsObj = {bookname: 'sdfg', price: 1234};
            axios({
                method: 'post',
                url: url,
                data: paramsObj
            }).then(function(res){
                console.log(res.data);
            })
        })