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

来源：互联网发布：打印文件软件编辑：程序博客网时间：2024/06/04 18:22

一、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>

阅读全文

0 0