vue-resource 和 axios

1.目录结构

目录结构.png

2.axios

• axios.html引入vue.js和axios.js插件,axios插件直接暴露了一个全局axios对象。
• axios.interceptor是一个全局拦截器，任何请求和响应之前都会先经过这个拦截器，可以从控制台的打印顺序看出。

//axios.html
...
<script src="https://cdn.staticfile.org/vue/2.2.6/vue.js"></script>
<script src="https://cdn.staticfile.org/axios/0.15.3/axios.js"></script>
...
<div id="app">
    <h1>axios插件</h1>
    <button  @click="get">get请求</button>
    <button  @click="post">post请求</button>
    <button  @click="http">http请求</button>
    <div>{{msg}}</div>
</div>
<script>
    //axios插件直接暴露了一个全局axios对象
    new Vue({
        el:'#app',
        data:{
            msg:"",
        },
        mounted(){
            //请求的拦截
            axios.interceptors.request.use(config=>{
                console.log("1：request init");
                return config;
            })
            //响应的拦截
            axios.interceptors.response.use(response=>{
                console.log("2：response init");
                return response;
            })
        },
        methods:{
            get(){
                axios.get('./package.json',{
                    params:{userId:123},
                    headers:{token:'jack'},
                }).then(res=>{
                    console.log("3：返回数据");
                    this.msg=res.data;
                }).catch(error=>{
                    console.log(error)
                })
            },
            post(){
                axios.post('./package.json',{userId:123},{
                    headers:{token:'tom'},
                }).then(res=>{
                    this.msg=res.data;
                }).catch(error=>{
                    console.log(error)
                })
            },
            http(){
                axios({
                    url:'./package.json',
                    method:'get',
                    //get,参数拼接到url
                    params:{
                        userId:'105'
                    },
                    //post
                    data:{
                        userId:'101'
                    },
                    headers:{
                        token:'candy'
                    }
                }).then(res=>{
                    this.msg=res.data
                })
            }
        }
    })
</script>
...

• 以下为axios get请求结果：
  axios-get请求.png
  axios-get请求 (2).png

3.vue-resource

• vue-resource 内部做了封装处理，直接挂载到了vue实例上,所以可以直接this.$http发请求, this.$http就代表vue-resource本身。

...
<script src="https://cdn.staticfile.org/vue/2.2.6/vue.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.3.1/vue-resource.js"></script>
...
<div id="app">
    <h1>vue-resource插件</h1>
    <button  @click="get">get请求</button>
    <button  @click="post">post请求</button>
    <button  @click="jsonp">jsonp跨域请求</button>
    <button  @click="http">http请求</button>
    <div>{{msg}}</div>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:"",
        },
        mounted() {
            //全局拦截器,可用来设置loading动画
            Vue.http.interceptors.push(function(request,next){
                console.log('request init')
                console.log(request)
                next(function(response){
                    console.log('response init')
                    console.log(response)
                    return response;
                })
            })
        },
        methods:{        
            get(){
                this.$http.get("./package.json",{
                    //参数
                    params:{
                        userId:'101'
                    },
                    //设置请求头
                    headers:{
                        token:"abcd",  
                    }
                }).then(res=>{
                    this.msg=res.data;
                },error=>{
                    this.msg=error;
                });
            },
            post(){                      
                this.$http.post('./package.json',{userId:102},{
                    headers:{
                        access_token:'abc',
                    }
                }).then(function (res) {
                    this.msg=res.data;
                })
            },                  
            //https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?&wd=a&cb=_jsonpf49x1wdbet
            jsonp(){
                this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?', {
                    params: {
                        wd: 'a'
                    },
                    jsonp: 'cb'      //vue-resource不能自定义回调函数名称
                }).then((res) => {
                    this.msg = res.data
                })
            },
            http(){
              this.$http({
                url:'./package.json',
                params:{
                  userId:'103',
                },
                headers:{
                  token:'123'
                },
                timeout:5,
                before(){
                  console.log('before init')
                }
              }).then(res=>{
                this.msg=res.data;
              })
            }
        }
    })
</script>

• 以下为vue-resource post请求结果：

vueResource-post请求.png
vueResource-post请求 (2).png

• 以下为vue-resource jsonp请求结果：

vueResource-jsonp请求.png
vueResource-jsonp请求 (2).png