axios 是一个专注于网络请求的库！

axios中文网|axios API 中文文档 | axios

1.axios基本使用

    <script src="./lib/axios.js"></script>
    <script>
        // http://www.liulongbin.top:3006/api/getbooks

        // 1. 调用 axios 方法得到的返回值是 Promise 对象
        axios({
            // 请求方式
            method: 'GET',
            // 请求的地址
            url: 'http://www.liulongbin.top:3006/api/getbooks',
            // URL 中的查询参数
            params: {
                id: 1
            },
            // 请求体参数
            data: {}
        }).then(function(result) {
            console.log(result)
        })
    </script>

2.axios封装的六个属性

2.axios的基本使用（Promise对象await和async简化写法）

 解构赋值后使用：重命名

• 1.调用axios之后，使用async和await进行简化
• 2.使用解构赋值，将axios封装的大对象中，把data属性解构出来
•  3.把解构出来的data属性，使用冒号进行重命名，一般重命名为{data：res}

    <script src="./lib/axios.js"></script>
    <script>
        document.querySelector('#btnPost').addEventListener('click', async function() {
            /* 如果调用某个方法返回值是个promise实例，则前面可以加await
            await只能用在被async“修饰”的方法中 */
            const {
                data
            } = await axios({
                method: 'POST',
                url: 'http://www.liulongbin.top:3006/api/post',
                data: {
                    name: 'zs',
                    age: 20
                }
            })
            console.log(data)

        })


        document.querySelector('#btnGet').addEventListener('click', async function() {
            /* 解构赋值后使用：重命名
            1.调用axios之后，使用async和await进行简化
            2.使用解构赋值，将axios封装的大对象中，把data属性解构出来
            3.把解构出来的data属性，使用冒号进行重命名，一般重命名为{data：res} */
            const {
                data: res
            } = await axios({
                method: 'GET',
                url: 'http://www.liulongbin.top:3006/api/getbooks',
            })
            console.log(res.data)
        })

        // $.ajax()   $.get()  $.post()
        // axios()    axios.get()    axios.post()    axios.delete()   axios.put()
    </script>

3.axios直接发起的GET和POST请求

    <button id="btnGET">GET</button>
    <button id="btnPOST">POST</button>

    <!-- axios发get请求 -->
    <script src="./lib/axios.js"></script>
    <script>
        document.querySelector('#btnGET').addEventListener('click', async function() {
            /*   axios.get('url地址'，{
                //get参数
                params:{}
              }) */

            const {
                data: res
            } = await axios.get('http://www.liulongbin.top:3006/api/getbooks', {
                params: {
                    id: 1
                }
            })
            console.log(res)
        })

        /* axios发post请求 */
        document.querySelector('#btnPOST').addEventListener('click', async function() {
            /* axios.post('url',{请求体格式}) */
            const {
                data: res
            } = await axios.post('http://www.liulongbin.top:3006/api/post', {
                name: 'zs',
                gender: '男'
            })
            console.log(res);
        })
    </script>