vue-resource实现get,post,jsonp请求

一、vue-resource概述1、使用：引入vue-resource<script src="js/vue.js"></script><script src="js/vue-resource.js"></script>2、支持的HTTP方法vue-resource的请求API是按照REST风格设计的，它提供了7种请求API：get(url, [options])head(url, [op

骑着毛驴的小猴子

2918人浏览 · 2017-09-07 17:57:53

骑着毛驴的小猴子 · 2017-09-07 17:57:53 发布

一、vue-resource概述

1、使用：引入vue-resource

<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>

2、支持的HTTP方法
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])

3、options对象
发送请求时的options选项对象包含以下属性：

参数	类型	描述
url	string	请求的URL
method	string	请求的HTTP方法，例如：’GET’, ‘POST’或其他HTTP方法
body	Object FormData string	request body
params	Object	请求的URL参数对象
headers	Object	request header
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发送

二、代码展示

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="node_modules/vue/dist/vue.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="node_modules/vue-resource/dist/vue-resource.min.js" type="text/javascript" charset="utf-8"></script>
    </head>

    <body>
        <div id="app">
            <button @click = "get">get请求</button>
        <button @click = "post">post请求</button>
        <button @click = "jsonp">jsonp请求</button>
        <p>{{message}}</p>
        </div>

        <script type="text/javascript">
            //Vue.http.options.emulateJSON = true;  
            new Vue({
                el:"#app",
                data:{
                    message:""
                },
                methods:{
                    get:function(){
                        this.$http.get("package.json",{
                            params:{
                                user:"123"
                            },
                            headers:{
                                token:"1234"
                            }
                        }).then(function(res){
                            this.message = res.data;
                        },function(err){
                            this.message = err;
                        })
                    },
                    post:function(){
                        this.$http.post("package.json",{
                            user:"1234"
                        },{
                            headers:{
                                token:"1234"
                            }
                        }).then(function(res){
                            this.message = res.data;
                        },function(err){
                            this.message = err;
                        })
                    },
                    jsonp:function(){
                        this.$http.jsonp("http://www.imooc.com/course/ajaxskillcourse?cid=796",{
                            params:{
                                user:"123"
                            },
                            headers:{
                                token:"1234"
                            }
                        }).then(function(res){
                            this.message = res.data;
                        },function(err){
                            this.message = err;
                        })
                    }
                }
            })
        </script>
    </body>

</html>