Vue

Vue的axios快速上手

2021年7月6日 /

一 axios的简介说明

它是Vue的一个通信框架，Vue本身有vue-resource，但是作者感觉是在重复造轮子，就弃用了deprecated自己的vue-resource，转而拥抱采用adapted第三方的axios.

二 axios的特性

支持数据转换，前端和后端的数据自动转换，自动转换请求的数据和响应的数据；

支持链式编程，类似Java8的Stream流式编程；

更多特性可查看：https://www.npmjs.com/package/axios介绍的关于Feature章节部分，作为学习新手，先了解个概貌，继续往前走，等二刷三刷的时候再深入知识点儿。

  • Make XMLHttpRequests from the browser
  • Make http requests from node.js
  • Supports the Promise API
  • Intercept request and response
  • Transform request and response data
  • Cancel requests
  • Automatic transforms for JSON data
  • Client side support for protecting against XSRF

三 编写一个axios的例子程序

1准备json文件data.json
{
    "name":"Google",
    "url":"http://google.com",
    "links":[
        {
            "name":"163",
            "url": "http://www.163.com"
        },
        {
            "name":"数据库敲门人",
            "url":"http://knockatdatabase.com"
        }
    ]
}
2 编写HTML文件，引入Vue.js和axios.js
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>axios通信</title>
    <!-- 引入Vue.js和axios文件 -->
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
    </body>
</html>

3 ViewModel里定义一个函数，指定返回值为info

然后，在div里，让其引用info这个返回的对象的属性，info.url和info.name。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>axios通信</title>
        <!-- 引入Vue.js和axios文件 -->
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <div >
                name:{{info.name}}
            </div>
            <div >
                url:{{info.url}}
            </div>
        </div>

        <script type="text/javascript">
            let app= new Vue({
                el:"#app",
                data(){
                    return{
                        info:{
                            name:'',
                            url:'',
                        }
                    }
                }
            })          
        </script>
    </body>
</html>
4 开始写axios

注意，这里的mounted，是Vue实例的生命周期的一部分。其写在这里的原因，类似于之前的jQuery的$function的用法。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>axios通信</title>
        <!-- 引入Vue.js和axios文件 -->
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <div >
                name:{{info.name}}
            </div>
            <div >
                url:{{info.url}}
            </div>
        </div>

        <script type="text/javascript">
            let app= new Vue({
                el:"#app",
                data(){
                    return{
                        info:{
                            name:'',
                            url:'',
                        }
                    }
                },
                // 这里的mounted类似于jQuery的$function的用法，当然，jQuery我还没用过。
                mounted() {
                    // 然后，开始写axios读取json数据文件，读取之后，then,这就类似于lambda表达式，
                    // 接下来，它的响应的对象this.info被赋值为response.data，
                    // 这里的this.$data.info可以直接简写成this.info=response.data
                    axios.get('data.json').then(response=>(this.$data.info=response.data))
                }
            })          
        </script>
    </body>
</html>

至此，一个简单的axios demo程序就写好了。我们在browser里可以看到效果。

5 axios返回从json中读取的数组

无非就是另外添加一个div，使用ul，然后使用v-for，即Vue的列表渲染。

需要注意的是，v-for里要写link/item in info.links。其中的links是axios从json文件里读取的数据，前面要带个info对象作为前缀。

6 给返回的URL加上a标签

最终的代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>axios通信</title>
        <!-- 引入Vue.js和axios文件 -->
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <div >
                name:{{info.name}}
            </div>
            <div >
                url: <a v-bind:href="info.url" target="_blank">{{info.url}}</a> 
            </div>
            <!-- 无非就是另外添加一个div，使用ul，然后使用v-for，即Vue的列表渲染。
需要注意的是，v-for里要写link/item in info.links。其中的links是axios从json文件里读取的数据，前面要带个info对象作为前缀。
  -->
            <div >
                <li v-for="link in info.links" v-bind:key="link.name">
                    {{link.name}} --- <a   v-bind:href="link.url" target="_blank">{{link.url}}</a> 
                </li>
            </div>
        </div>

        <script type="text/javascript">
            let app= new Vue({
                el:"#app",
                data(){
                    return{
                        info:{
                            name:'',
                            url:'',
                        }
                    }
                },
                // 这里的mounted类似于jQuery的$function的用法，当然，jQuery我还没用过。
                mounted() {
                    // 然后，开始写axios读取json数据文件，读取之后，then,这就类似于lambda表达式，
                    // 接下来，它的响应的对象this.info被赋值为response.data，
                    // 这里的this.$data.info可以直接简写成this.info=response.data
                    axios.get('data.json').then(response=>(this.$data.info=response.data))
                }
            })          
        </script>
    </body>
</html>

四小结

对Vue的使用目前还处于上手接触阶段，暂时没有更多个人的对于Vue的理解和想法。我想，随着我主键的对Vue越来越熟悉，经验慢慢丰富，理解更深。我就能写出、表达出我个人的理解和想法。

Post Views: 1,741

留言