Vue笔记10：axios

axios.get|post|put|delete(url,options)

<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="axios.1.8.min.js"></script>
<script type="text/javascript">
    var App = {
        template: `
        <div>
         <button @click="sendAjax">发ajax</button>
        </div>
    `,
        methods: {
            sendAjax: function () {
                //让组件具备axios对象的引用
                // axios.get|post|put|delete(url,options)
                axios.get('/http://127.0.0.1/upload')
                    .then(function (res) {
                        console.log(res)
                    })
                    .catch(function (err) {
                        console.log(err)
                    })
            }
        }
    }
    //组件内的每个this对象都是Vue的孩子
    //Vue祖宗的原型数据，都会共享给孩子
    Vue.prototype.$axios = axios;
    new Vue({
        el: '#app',
        components: {
            app: App,
        },
        template: '<app/>',
    });
</script>
</body>

合并请求

代码示例：

<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="axios.1.8.min.js"></script>
<script type="text/javascript">

    var App = {
        template: `
        <div>
        响应1： {{ res1 }}
        响应2： {{ res2 }}
         <button @click="sendAjax">发ajax</button>
        </div>
    `,
        data:function(){
            return {
                res1:'',
                res2:'',
            }
        },
        methods: {
            sendAjax: function () {

                //配置公共对象
                this.$axios.defaults.baseURL='http://127.0.0.1/';


                //请求1 get / 请求2 post /add
                //this.$axios.get | post (url,[post的时候有data],options)
                var q1 = this.$axios.get('')
                var q2 = this.$axios.post('add','a=1')

                //合并这两个请求
                this.$axios.all([q1,q2])
                    .then(this.$axios.spread((res1,res2)=>{
                        //全部成功
                        this.res1=res1.data;
                        this.res2=res2.data;
                    }))
                    .catch(err=>{
                        //其一失败
                        console.log(err)
                    })
            }
        }
    }

    //组件内的每个this对象都是Vue的孩子
    //Vue祖宗的原型数据，都会共享给孩子

    Vue.prototype.$axios = axios;

    new Vue({
        el: '#app',
        components: {
            app: App,
        },
        template: '<app/>',
    });
</script>
</body>

代码中合并请求的then用到了箭头函数所以this的指向是对象本身，如果用function(){this..}则 this指向的是window对象

拦截器

单请求配置options: axios.post(url,data,options)
全局配置defaults:this.$axios.defaults
config:请求拦截器中的参数
response.config 响应拦截器中的参数
options
- baseURL 基础URL路径
- params查询字符串（对象）
- transformRequest:是个function(post请求传递的数据){ }转换请求数据
- transformResponse:是个function(res){自己转换相应回来的数据}转换响应体数据
- headers 请求信息
- data 请求体数据
- timeout 请求超时，请求多久后没有响应算是超时（毫秒）

代码示例：

<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="axios.1.8.min.js"></script>
<script type="text/javascript">

    var App = {
        template: `
        <div>
        响应1： {{ res1 }}
        响应2： {{ res2 }}
         <button @click="sendAjax">发ajax</button>
        </div>
    `,
        data:function(){
            return {
                res1:'',
                res2:'',
            }
        },
        methods: {
            sendAjax: function () {

                //配置公共对象

                this.$axios.defaults.baseURL='http://127.0.0.1/';
                //会覆盖原来默认的头
                // this.$axios.defaults.headers = {};
                //走默认的请求头，修改个别
                this.$axios.defaults.headers.accept = 'abc';

                //请求1
                this.$axios.get('',{
                    params:{id:1},
                    //修改响应体数据
                    transformResponse: function (data) {
                        data = '改了数据了';
                        return data;
                    },
                })
                    .then(res=>{
                        console.log(res.data);
                    })
                    .catch(err=>{
                        console.log(err.data);
                    });
                //请求2
                this.$axios.post('add','name=jack',{
                    timeout:1000,
                    //修改请求体数据
                    transformRequest: function (data) {
                        return 'name= rose';
                    }
                })

            }
        }
    }

    //组件内的每个this对象都是Vue的孩子
    //Vue祖宗的原型数据，都会共享给孩子

    Vue.prototype.$axios = axios;

    new Vue({
        el: '#app',
        components: {
            app: App,
        },
        template: '<app/>',
    });
</script>
</body>