Axios交互

一、什么是交互？

交互就是交流互动
根据人的输入，让程序或应用去根据输入选择执行流程，提供给我们需要的信息

1.前端与后端

任何一个应用程序都有前端和后端

前端：客户端，就是浏览器

控制页面的样式
数据的展示
接收用户输入，与用户交互

后端：服务器

执行业务处理
操作数据库，返回给我们需要的数据

2.前后端交互原理

前台接收用户的信息，发送到后台
后台获得信息后进行数据处理，到数据库取一些数据
后台拿到数据库数据返回给前台页面进行显示

二.什么是axios？

axios是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端

1.作用

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应

2.相关网址

官方地址：https://github.com/axios/axios
中文地址：http://www.axios-js.com/
中文文档：https://www.kancloud.cn/yunye/axios/234845

三. axios安装使用

使用 npm

$ npm install axios

使用 cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

1.发送get请求

html 复制代码

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <h1>{{name}}</h1>
        <button @click="get()">GET</button>
    </div>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
    var app = new Vue({
        el : '#app',
        data : {
            msg : 'Hello',
            name : 'none'
        },
        methods : {
            get : function(){
                axios.get('./a.txt', {
                    params : {
                        id : 1000
                    },
                    headers : {
                    token : 'HHHHHHHHHHHHHHH'
                    }
                }).then(res => {
                    this.msg = res.data;
                    this.name = res.data.name;
                }).catch(err =>{
                this.msg = err;
                });
            }
        }
    })
</script>
</body>

a.txt

html 复制代码

{
"name":"Tom",
"age":13
}

2.发送post请求

html 复制代码

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <title>post方法</title>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript" src="axios.min.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ msg }}</p>
        <button @click="post"> post方法 </button>
    </div>
</body>
</html>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
            data: {
                msg: "hello",
                postUrl: "http://route.showapi.com/90-87?
                showapi_appid=45300&showapi_sign=c28de9d6f79e44369a9abcd40fa3e277",
            },
            methods: {
                post() {
                    axios.post(this.postUrl, {
                        userId: "01",
                        userName: "MT"
                    }, {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    }).then( //仍然支持promise语法
                        res => {
                            // 这里我们把返回值赋值给msg显示到页面
                            this.msg = res.data;
                        }).catch(err => {
                            // 没有成功获得数据的时候，把错误打印出来
                            console.log(err)
                          })
                }
            }
        });
</script>

注意：在不同服务器下的项目需要解决跨域问题， java 中可在方法或类中添加 @CrossOrigin 注解， 当然也有其他方法，模板都一样上网搜粘一粘

四. Vue.js实例的生命周期

1.什么是实例的生命周期？

生命周期： 是指实例对象从构造函数开始执行（被创建）到被 GC （ Garbage Collection ：垃圾回收）
回收销毁的整个存在的时期

2.什么是生命周期钩子？

在生命周期中被自动调用的函数 叫做生命周期函数，也被形象的称为 钩子函数 。
在对象从创建到被回收的整个过程中会在不同的时期有不同的钩子函数，我们可以利用不同时期的钩子
函数去完成不同的操作。

3.常用钩子函数

4.生命周期示例

html 复制代码

<body>
    <div id='app'>
        <h1>{{message}}</h1>
        <input type="text" v-model="message" />
    </div>
<script src="js/axios.min.js"></script>
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello'
        },
        // 生命周期的写法需要注意，适合data在一个级别的
        beforeCreate: function () {
            console.group('------beforeCreate创建前状态------');
            console.log("el: " + this.$el); //undefined
            console.log("data: " + this.$data); //undefined
            console.log("message: " + this.message) //undefined
            // 在这个时期 ,说明 el 和 data 并未初始化
            // 这个时候做的操作,例如:加一些loading事件
        },
        created: function () {
            console.group('------created创建完毕状态------');
            console.log("el: " + this.$el); //undefined
            console.log("data: " + this.$data); //已被初始化
            console.log("message: " + this.message); //Vue的生命周期,说明已被初始化
            // 这个时期,data 数据已经初始化，但是 el没有
            // 这个时候可以做的操作例如:结束loading事件，还做一些初始化，实现函数自执行等
        },
        beforeMount: function () {
            console.group('------beforeMount挂载前状态------');
            console.log("el: " + (this.$el)); //已被初始化
            console.log(this.$el);
            console.log("data: " + this.$data); //已被初始化
            console.log("message: " + this.message); //已被初始化
            // 到这个时期,data 和 el 都已经 初始化
        },
        mounted: function () {
            console.group('------mounted 挂载后状态------');
            console.log("el: " + this.$el); //已被初始化
            console.log(this.$el);
            console.log("data: " + this.$data); //已被初始化
            console.log("message: " + this.message); //已被初始化
            // 完成挂载，这个生命周期用的是比较多的
            // 最常见的就是:1、发起后端请求，拿回数据 2、接收页面之间的传递的参数 3、子组件向父组件传递参数
         },
         beforeUpdate: function () {
            console.group('------beforeUpdate 更新前状态------');
            console.log("el: " + this.$el);
            console.log(this.$el);
            console.log("data : " + this.$data);
            console.log("message: " + this.message);
        },
        updated: function () {
            console.group('------updated 更新后状态------');
            console.log("el: " + this.$el);
            console.log(this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message);
            // 当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，先后调用
            beforeUpdate和updated钩子函数。我们在console中输入 vm.message = '触发组件更新'
            // 这里就比较好理解了：当希望更新组件前做一些操作的时候，我们就可以调用
            beforeUpdate钩子函数，同理使用 updated 钩子函数
        },
        beforeDestroy: function () {
            console.group('------beforeDestroy 销毁前状态------');
            console.log("el: " + this.$el);
            console.log(this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message);
            // beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。
        },
        destroyed: function () {
            console.group('------destroyed 销毁后状态------');
            console.log("el: " + this.$el);
            console.log(this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message);
            //destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
        }
    });
</script>
</body>

五.在axios中使用拦截器

1.什么是全局拦截器

全局拦截器： 可在发送请求或响应请求被 then 或 catch 处理前拦截它们

发送请求之前拦截，可以对请求数据进行处理，比如给每一个请求都添加上 token 或者给请求统一
添加一些内容
在响应请求之后拦截，我们可以对返回的数据进行二次的加工

2.发送前与响应后拦截示例

html 复制代码

<body>
    <div id='app'>
        <h1>{{msg}}</h1>
        <button @click="post()">Post</button>
    </div>
<script src="js/axios.min.js"></script>
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el : '#app',
        data : {
            msg : "Hello"
        },
        mounted : function(){
        // 在数据挂载时设置拦截器
        axios.interceptors.request.use(function(config){
            console.log("发送前...")
            return config;
        }, function(err){
            console.log(err);
            return Promise.reject(err);
        });
        axios.interceptors.response.use(function(config){
            console.log("响应后...")
            return config;
        }, function(err){
            console.log(err);
            return Promise.reject(err);
        });
    },
    methods : {
        post(){
            axios.post("http://route.showapi.com/90-87?
            showapi_appid=45300",{
                id : 1001
            },{
            headers : {
                'Content-Type' : 'application/x-www-form-urlencoded'
            }
        }).then(res => {
            this.msg = res.data;
        }).catch(err => {
            console.log(err);
        });
    }
}
})
</script>
</body>

六、Vue.js过滤器

1.什么是过滤器？

Vue.js 支持在 {{}} 插值的尾部添加一个管道符 " （ | ） " 对数据进行过滤，经常用于格式化文本，比如字母的大写、货币的千位使用逗号分隔等
过滤器的本质： 就是一个有返回值的方法

2.过滤器的定义方法

过滤的规则是自定义的，通过给Vue示例添加选项filters来设置
过滤器是 JavaScript 函数，因此可以接收参数

过滤器可以串联

{{msg | filterA | filterB}}
filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到filterB 中。

html 复制代码

<body>
    <div id="app">
        <h1>{{bonus}}</h1>
        <h1>{{bonus | discount(8) | myCurrency('$')}}</h1>
    </div>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
    var app = new Vue({
        el : '#app',
        data : {
            bonus : 9999999
        },
        filters : {
            myCurrency : function(res, fmt){
                console.log("fmt=="+fmt);//$
                console.log("res=="+res);//7999999.2
                return fmt + res;
            },
            discount : function(res, dis){
                console.log("res=="+res); //9999999
                console.log("dis=="+dis); //8
                return res * dis / 10;
            }
        }
    });
</script>
</body>

一、什么是交互？

**1.**前端与后端

**2.**前后端交互原理

二**.什么是axios****？**

**1.**作用

**2.**相关网址

三**. axios****安装使用**

1.发送get****请求

2.发送post****请求

四**. Vue.js****实例的生命周期**

**1.**什么是实例的生命周期？

**2.**什么是生命周期钩子？

**3.**常用钩子函数

**4.**生命周期示例

五**.在axios****中使用拦截器**

**1.**什么是全局拦截器

**2.**发送前与响应后拦截示例

六、Vue.js过滤器

**1.**什么是过滤器？

**2.**过滤器的定义方法

1.前端与后端

2.前后端交互原理

二.什么是axios？

1.作用

2.相关网址

三. axios安装使用

1.发送get请求

2.发送post请求

四. Vue.js实例的生命周期

1.什么是实例的生命周期？

2.什么是生命周期钩子？

3.常用钩子函数

4.生命周期示例

五.在axios中使用拦截器

1.什么是全局拦截器

2.发送前与响应后拦截示例

1.什么是过滤器？

2.过滤器的定义方法