学习资料来源

vue-resource特点

1. 体积小

   vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。

2. 支持主流的浏览器

   和Vue.js一样，vue-resource除了不支持IE 9以下的浏览器，其他主流的浏览器都支持。

3. 支持Promise API和URI Templates

   Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算。
   URI Templates表示URI模板，有些类似于ASP.NET MVC的路由模板。

4. 支持拦截器

   拦截器是全局的，拦截器可以在请求发送前和发送请求后做一些处理。
   拦截器在一些场景下会非常有用，比如请求发送前在headers中设置access_token，或者在请求失败时，提供共通的处理方式。

基本语法

引入vue-resource后，可以基于全局的Vue对象使用http，也可以基于某个Vue实例使用http。

// 基于全局Vue对象使用http

Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

实例

get

get:function(){
        this.$http.get('data/a.php',{
            params:{a:1,b:2}
        })
        .then(function(res){
            alert(res.data)
        },function(res){
            alert(res.status)
        })
    }

post

post:function(){
        this.$http.post('data/b.php',{
            // params:{
                a:1,
                b:2,
            // }    
        },{
                emulateJSON:true
        })
        .then(function(res){
            alert(res.data)
        },function(res){
            console.log(res.status)
        })

    }

jsonp跨域

jsonp:function(){
        this.$http.jsonp('https://sug.so.360.cn/suggest?callback=suggest_so&word=a',{
                q:'a'
        })
        .then(function(res){
            alert(res.data.s)
        },function(res){
            console.log(res.staus)
        })
    }