vue-resource 提供了 7 种请求 API(REST 风格)：
get(url, [options])head(url, [options])delete(url, [options])jsonp(url, [options])post(url, [body], [options])put(url, [body], [options])patch(url, [body], [options])
除了 jsonp 以外，另外 6 种的 API 名称是标准的 HTTP 方法。
options 参数说明:
| 参数 | 类型 | 描述 |
|---|---|---|
| url | string | 请求的目标URL |
| body | Object, FormData, string | 作为请求体发送的数据 |
| headers | Object | 作为请求头部发送的头部对象 |
| params | Object | 作为URL参数的参数对象 |
| method | string | HTTP方法 (例如GET，POST，...) |
| timeout | number | 请求超时（单位：毫秒） (0表示永不超时) |
| before | function(request) | 在请求发送之前修改请求的回调函数 |
| progress | function(event) | 用于处理上传进度的回调函数 ProgressEvent |
| credentials | boolean | 是否需要出示用于跨站点请求的凭据 |
| emulateHTTP | boolean | 是否需要通过设置X-HTTP-Method-Override头部并且以传统POST方式发送PUT，PATCH和DELETE请求。 |
| emulateJSON | boolean | 设置请求体的类型为application/x-www-form-urlencoded |
通过如下属性和方法处理一个请求获取到的响应对象：
| 属性 | 类型 | 描述 |
|---|---|---|
| url | string | 响应的 URL 源 |
| body | Object, Blob, string | 响应体数据 |
| headers | Header | 请求头部对象 |
| ok | boolean | 当 HTTP 响应码为 200 到 299 之间的数值时该值为 true |
| status | number | HTTP 响应码 |
| statusText | string | HTTP 响应状态 |
| 方法 | 类型 | 描述 |
| text() | 约定值 | 以字符串方式返回响应体 |
| json() | 约定值 | 以格式化后的 json 对象方式返回响应体 |
| blob() | 约定值 | 以二进制 Blob 对象方式返回响应体 |
小乙shine
103***0459@qq.com
使用 vue-resource 的 jsonp 处理跨域请求：
<div id="app"> 请输入关键字：<input type="text" v-model="keyword" @keyup="sendJsonP(keyword)"> <ul> <li v-for="r in result">{{r}}</li> </ul></div><script>window.onload = function () { new Vue({ el: '#app', data: { keyword: '', result: '' }, methods: { sendJsonP(keyword) { let url = 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web'; this.$http.jsonp(url, { params: { wd: keyword }, jsonp: 'cb'//jsonp默认是callback,百度缩写成了cb，所以需要指定下 } }).then(res => { if (res.data.g) { this.result = res.data.g.map(x => x['q']); } else { this.result = []; } }); } } });}</script>