Vue学习之 axios-CSDN博客

本文链接：https://blog.csdn.net/qq_33736036/article/details/128446860

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

中文网址：http://www.axios-js.com/
英文网址: https://www.npmjs.com/package/axios

一基础用法示例1

    <script src="../lib/axios.js"></script>
    <script src="../lib/vue.js"></script>
    <script>
        //调用axios方法的得到的返回值是Promise对象
        const result = axios({
            // 请求的方式 有 GET ,POST
            method:'GET',
            // 请求的地址
            url:'http://www.liulongbin.top:3006/api/getbooks'
        })
        result.then(function(books){
            console.log(books.data)
        })
    </script>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
            },
            methods:{
            }
        })
    </script>

二基础用法示例2 —带请求参数

1. 发起 GET 请求，Get请求时使用的属性：params

    <script src="../lib/axios.js"></script>
    <script src="../lib/vue.js"></script>
    <script>
        //调用axios方法的得到的返回值是Promise对象
        axios({
            // 请求的方式
            method:'GET',
            // 请求的地址
            url:'http://www.liulongbin.top:3006/api/getbooks',
            // URL 中的查询参数  --Get传参用
            params:{
                id:1 // 表示请求ID为1的返回值
            }
        }).then(function(result){
            console.log(result)
        })
    </script>
    <script >
        const vm = new Vue({
            el:'#app',
            data:{
            },
            methods:{
            }
        })
    </script>

2. 发起 Post 请求，Post请求时使用的属性：data

    <script src="../lib/axios.js"></script>
    <script src="../lib/vue.js"></script>
    <div id="app">
        <button @click="postClick">发起Post请求</button>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
            },
            methods:{
                postClick(){
                    axios({
                        method:'POST',
                        url:'http://www.liulongbin.top:3006/api/post',
                        data:{
                            name:'2s',
                            age:20
                        }
                    }).then(function(result){
                        console.log(result)
                    })
                }
            }
        })
    </script>

三细节小窍门 await 和 async 用法

如果调用某个方法的返回值是Promise对象则前面可以添加 await 来返回真是的数据，await 只能用在被 async “修饰”的方法中

    <script src="../lib/axios.js"></script>
    <script src="../lib/vue.js"></script>

    <div id="app">
        <button  @click="postClick">发起Post请求</button>
        <button  @click="getClick">发起Get请求</button>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
            },
            methods:{
                // 标准版
                async postClick(){
                    const {data} = await axios({
                        method:'POST',
                        url:'http://www.liulongbin.top:3006/api/post',
                        data:{
                            name:'2s',
                            age:20
                        }
                    })
                    console.log(data)// data 就是返回的真实的数据
                },

                // 简化精简版 
                async getClick(){
                    // 解析赋值的时候，使用:进行重命名
                    const {data:res} = await axios({
                        method:'GET',
                        url:'http://www.liulongbin.top:3006/api/getbooks',
                        params:{
                                id:1 // 表示请求ID为1的返回值
                           }
                    })
                   console.log(res.data) // 解析data
                }
            }
        })
    </script>

四直接发起请求的用法 — 推荐使用

直接用axios 发起请求 axios.post()和axios.get(). 用上面的例子简化如下

    <script src="../lib/axios.js"></script>
    <script src="../lib/vue.js"></script>

    <div id="app">
        <button  @click="PClick">直接Post请求</button>
        <button  @click="GClick">直接Get请求</button>
    </div>

    <script>
        const vm = new Vue({
            el:'#app',
            data:{
            },
            methods:{
                async PClick(){
                    const {data:res} = await axios.post('http://www.liulongbin.top:3006/api/post'{name:'zs',gender:'女'});
                    console.log(res);
                },

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