Axios initiates a data request

axiosSimilar to jQuery is a library, axios is a library focused on data requests, lightweight and very easy to use

You need to call the axios.js package before using it

// 使用前先调用
<script src="./js/axios.js"></script>

Go directly to Talent, let’s talk about how to use the axiosinitiate getrequest and postthe request separately, and then use the get and post requests axiossimilar to those in jQuery$.ajax({})的方式

Use axios to initiate a get request

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

The result of the call:
insert image description here

Use axios to initiate a post request

    <button id="btn2">发起post请求</button>
     document.querySelector('#btn2').addEventListener('click', function() {
    
    
            var url = 'http://liulongbin.top:3006/api/post';
            var dataObj = {
    
    
                name: 'zs',
                age: 29
            };
            axios.post(url, dataObj).then(function(res) {
    
    
                var result = res.data;
                console.log(result);
            })
        })

Call output:
insert image description here

Use axios to directly initiate a get request similar to $.ajax in jQuery

    <button id="btn3">直接使用axios发起get请求</button>
     document.querySelector('#btn3').addEventListener('click', function() {
    
    
            var url = 'http://liulongbin.top:3006/api/get';
            var paramsData = {
    
    
                name: 'zs',
                age: 20
            };
            axios({
    
    
                method: 'get',
                url: url,
                params: paramsData,

            }).then(function(res) {
    
    
                console.log(res.data);
            })
        })

The result of calling the request is:
insert image description here

Use axios to directly initiate a post request similar to $.ajax in jQuery

 <button id="btn4">直接使用axios发起post请求</button>
  document.querySelector('#btn4').addEventListener('click', function() {
    
    
            var url = 'http://liulongbin.top:3006/api/post';
            var data = {
    
    
                name: 'zs',
                age: 20
            };
            axios({
    
    
                method: 'post',
                url: url,
                data: data
            }).then(function(res) {
    
    
                console.log(res.data);
            })
        })

The result of the data call is:
insert image description here

tips:The most important thing is to remember the following Query中$.ajaxcalling method similar to j, which is relatively simple. In addition, in this method: The difference between the calling methods of get and post is that the getdata is params:{}requested by the method used, postand the data is data:{}requested by the method used

Keep reviewing, keep being excellent, be practical and do things seriously; pay attention to Sanlian and keep updating~~~
insert image description here