1.vue-resource 的请求 api 是按照 rest 风格设计的, 它提供了 7 种请求 api
- get(url, [data], [options]);
- head(url,[data],[options]);
- post(url, [data], [options]);
- put(url, [data], [options]);
- patch(url, [data], [options]);
- delete(url, [data], [options]);
- jsonp(url, [data], [options]);
都是接受三个参数:
url(字符串), 请求地址可被 options 对象中 url 属性覆盖
data(可选, 字符串或对象), 要发送的数据, 可被 options 对象中的 data 属性覆盖
options 对象
参数 | 类型 | 描述 |
---|---|---|
url | string | 请求的 URL |
method | string | 请求的 HTTP 方法,例如:‘GET‘, ‘POST‘或其他 HTTP 方法 |
body | Object, FormData string | request body |
params | Object | 请求的 URL 参数对象 ,get |
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 发送 |
emulateHTTP 的作用
如果 web 服务器无法处理 PUT, PATCH 和 DELETE 这种 REST 风格的请求, 你可以启用 enulateHTTP 现象启用该选项后, 请求会以普通的 POST 方法发出, 并且 HTTP 头信息的 X-HTTP-Method-Override 属性会设置为实际的 HTTP 方法
Vue.http.options.emulateHTTP = true;
emulateJSON 的作用
如果 Web 服务器无法处理编码为 application/json 的请求, 你可以启用 emulateJSON 选项启用该选项后, 请求会以 application/x-www-form-urlencoded 作为 MIME type, 就像普通的 html 表单一样
Vue.http.options.emulateJSON = true;
2. 如何使用 vue-resource
安装 vue-resource
npm i vue-resource --save -dev
--save 是安装到开发依赖中去
dependencies 是项目的依赖, 是项目上线后仍然要用的插件
devDependencies 是开发的依赖, 是在开发过程中要使用的
要引用插件
<script src="node_modules/vue-resouce/dist/vue-resource.min.js"></script>
调用 get 方法:
- <div id="app">
- <a href="javascript:;" v-on:click="ready">get 请求 </a>
- </div>
- <script>
- new vue({
- el:"app:,
- methods:{
- ready: function() {
- // get 请求
- this.$http.get(this.apiUrl,{
- params:{ // 填写传输的参数
- usersId:"101"
- }
- }) .then(res=> {
- // 请求成功回调
- },err => {
- // 请求失败回调
- });
- }
- }
- })
- </script>
调用 post 方法
- post:function(){
- this.$http.post(url,{usrid:105"},{header:{acction:"sss"}).then(res=>{
- // 成功回掉
- })
- }
调用 jsonp 跨域请求
- jsonp: function() {
- this.$http.jsonp(this.apiUrl).then(function(response){
- this.$set(gridData, response.data)
- })
- }
vue-resource 是一个非常轻量的用于处理 HTTP 请求的插件, 它提供了两种方式来处理 HTTP 请求:
1 使用 Vue.http 或 this.$http
2 使用 Vue.resource 或 this.$resource
来源: http://www.bubuko.com/infodetail-2502906.html