Vue2中的数据交互vue-resource

基本语法

必须引入一个库：vue-resource github地址

// 基于全局Vue对象使用http 
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

// 在一个Vue实例内使用$http 
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

vue-resource的请求API是按照REST风格设计的，它提供了7种请求API：

get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])

Options

Parameter	Type	Description
url	`string`	请求的UR
body	`Object`, `FormData`, `string`	request body
headers	`Object`	request header
params	`Object`	请求的URL参数对象
method	`string`	请求的HTTP方法，例如：'GET', 'POST'或其他HTTP方法
timeout	`number`	单位为毫秒的请求超时时间 (0 表示无超时时间)
before	`function(request)`	请求发送前的处理函数，类似于jQuery的beforeSend函数
progress	`function(event)`	ProgressEvent回调处理函数
credentials	`boolean`	表示跨域请求时是否需要使用凭证
emulateHTTP	`boolean`	发送PUT, PATCH, DELETE请求时以HTTP POST的方式发送，并设置请求头的X-HTTP-Method-Override
emulateJSON	`boolean`	将request body以application/x-www-form-urlencoded content type发送

1. 向文本发出get请求

准备一个1.txt 的文本数据，时面的内容是：welcomet to vue!!!


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://unpkg.com/vue/dist/vue.js"></script>
    <script src="http://files.cnblogs.com/files/zycbloger/vue-resource.min.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{
                    msg:'Hello World!',
                },
                methods:{
                    get:function(){
                        //发送get请求
                        this.$http.get('1.txt').then(function(res){
                            alert(res.body);    
                        },function(){
                            alert('请求失败处理');   //失败处理
                        });
                    }
                }
            });
        }
    </script>
</head>
<body> 
    <div id="box">
        <input type="button" @click="get()" value="按钮">
    </div>
</body>
</html>

上面代码实现了，点击按钮，就发送get请求，成功就会执行弹窗 welcomet to vue!!!

2. 关于向后端请求，并带参数的写法


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://unpkg.com/vue/dist/vue.js"></script>
    <script src="http://files.cnblogs.com/files/zycbloger/vue-resource.min.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{
                    msg:'Hello World!',
                },
                methods:{
                    get:function(){
                        //发送get请求
                        this.$http.get('get.do',{a:1,b:2}).then(function(res){
                            alert(res.body);    
                        },function(){
                            alert('请求失败处理');   //失败处理
                        });
                    },

                    post:function(){
                        //发送post请求
                        this.$http.post('post.do',{a:1,b:2}).then(function(res){
                            alert(res.body);    
                        },function(){
                            alert('请求失败处理');   //失败处理
                        });
                    }
                }
            });
        }
    </script>
</head>
<body> 
    <div id="box">
        <input type="button" @click="get()" value="按钮get">
        <input type="button" @click="post()" value="按钮post">
    </div>
</body>
</html>