简介

vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。

本文是基于之前的文章(Vue学习笔记进阶篇——vue-cli安装及介绍)vue-cli脚手架工具的。

基本语法

引入vue-resource后，可以基于全局的Vue对象使用http，也可以基于某个Vue实例使用http。

// 基于全局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);

以下是一个简单的get使用示例：

// GET /someUrl

this.$http.get('/someUrl').then(response => {

// success callback

}, response => {

// error callback

});

http方法列表

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

URL to which the request is sent

body

Object, FormData, string

Data to be sent as the request body

headers

Object

Headers object to be sent as HTTP request headers

params

Object

Parameters object to be sent as URL parameters

method

string

HTTP method (e.g. GET, POST, ...)

responseType

string

Type of the response body (e.g. text, blob, json, ...)

timeout

number

Request timeout in milliseconds (0 means no timeout)

before

function(request)

Callback function to modify the request options before it is sent

progress

function(event)

Callback function to handle the ProgressEvent of uploads

credentials

boolean

Indicates whether or not cross-site Access-Control requests should be made using credentials

emulateHTTP

boolean

Send PUT, PATCH and DELETE requests with a HTTP POST and set the X-HTTP-Method-Override header

emulateJSON

boolean

Send request body as application/x-www-form-urlencoded content type

Response

返回对象的参数以及对象的方法如下：

Property

Type

Description

url

string

Response URL origin

body

Object, Blob, string

Response body

headers

Header

Response Headers object

ok

boolean

HTTP status code between 200 and 299

status

number

HTTP status code of the response

statusText

string

HTTP status text of the response

Method

Type

Description

text()

Promise

Resolves the body as string

json()

Promise

Resolves the body as parsed JSON object

blob()

Promise

Resolves the body as Blob object

Example

简单的post提交

{

// POST /someUrl

this.$http.post('/someUrl', {foo: 'bar'}).then(response => {

// get status

response.status;

// get status text

response.statusText;

// get 'Expires' header

response.headers.get('Expires');

// get body data

this.someData = response.body;

}, response => {

// error callback

});

}

带查询参数和自定义请求头的GET请求

{

// GET /someUrl?foo=bar

this.$http.get('/someUrl', {params: {foo: 'bar'}, headers: {'X-Custom': '...'}}).then(response => {

// success callback

}, response => {

// error callback

});

}

获取图片并使用blob()方法从响应中提取图片的主体内容。

// GET /image.jpg

this.$http.get('/image.jpg', {responseType: 'blob'}).then(response => {

// resolve to Blob

return response.blob();

}).then(blob => {

// use image Blob

});

安装

在终端通过cd命令进入到之前文章中创建的my-demo1项目目录里，然后使用以下命令进行安装:

npm install vue-resource --save

--save参数的作用是在我们的包配置文件package.json文件中添加对应的配置。安装成功后， 可以查看package.json文件，你会发现多了"vue-resource": "^1.3.4"的配置。具体如下：

"dependencies": {

"vue": "^2.3.3",

"vue-resource": "^1.3.4",

"vue-router": "^2.7.0"

},

使用

注册

通过以上步骤，我们已经安装好了vue-resource，但是在vue-cli中我们如何使用呢？

首先，我们需要在main.js文件中导入并注册vue-resource:

import VueResource from 'vue-resource'

Vue.use(VueResource)

项目中调用

在此之前，我用php的laravel框架开发了一些简单的api接口，用以接下来我们的测试。这里我先介绍下，我的api接口的功能：

url: http://api.chairis.cn/api?app_id=123456&method=demo.run

params:

app_id: 应用id, 我这边提供了一个测试的id123456

method: 方法名称，我这边提供的测试方法为demo.run

功能：这个方法的功能就比较简单了，就是把上送的参数再返回来而已。

我们可以在浏览器中输入上述url测试下是否能成功：

从图中可以看出，返回的对象里，data就是我们的上送的内容，当然你也可以加一些其他的参数，也同样的会返回，只是app_id, method必须是正确的，其他的随便。如下：

既然我们的接口是没有问题的，那么，我们就试试我们的vue-resource的强大功能吧。这里我们就在之前的DemoHome组件里实现我们的测试吧。

get

修改DemoHome组件的javascript标签的代码如下：

export default({

name:'home',

mounted:function () {

this.$http.get('http://api.chairis.cn/api',{

params:{

app_id:'123456',

method:'demo.run',

name:'chain'

}

}).then(response => {

console.log('请求成功')

},

response => {

console.log('请求失败')

});

}

})

保存后，刷新页面，可以从控制台看到输出了请求成功字样。然后我们再看下请求和返回的数据：

请求：

响应：

post

修改DemoHome组件的javascript标签的代码如下：

export default({

name:'home',

mounted:function () {

this.$http.post('http://api.chairis.cn/api?app_id=123456&method=demo.run',{

body: {

name: {

first_name: 'chain',

last_name: 'zhang'

},

email: 'zzceng@126.com'

}

},{emulateJSON: true}).then(response => {

console.log('请求成功')

},

response => {

console.log('请求失败')

});

}

})

保存后，刷新页面，可以从控制台看到输出了请求成功字样。然后我们再看下请求和返回的数据：

请求：

响应：

在这里我们看到了陌生的东西emulateJSON, 为什么要加这个参数呢，想知道为什么，那么就把他去掉试试，去掉了，你会发现请求失败了，报以下错误：

这是个跨域请求，没有权限的问题，但是已加上这个熟悉就可以了。那我们就来看看这到底是个什么鬼。

emulateJSON

emulateJSON(布尔值)

默认值为：false,当值为true并且data为对象时，设置请求头Content-Type的值为application/x-www-form-urlencoded。

如果服务器无法处理编码为application/json的请求，可以启用emulateJSON选项。启用之后，请求会以application/x-www-form-urlencoded为MIME type，就像普通的HTML表单一样。

而this.$http.post的data默认不是以form data的形式，而是request payload, 所以需要这样设置。

当然，如果你觉得每次的请求都要加这个熟悉很麻烦的话，你也可以使用全局配置，在main.js中注册了vue-resource之后，添加以下代码即可：

Vue.http.options.emulateJSON = true;

另外还有个类似的属性emulateHTTP.

emulateHTTP

emulateHTTP(布尔值)

默认值为:false,当值为true是，用HTTP的POST方式PUT，PATCH，DELETE等请求，并设置请求头字段HTTP_Method_Override为原始请求方法。

如果Web服务器无法处理PUT, PATCH和DELETE这种REST风格的请求，你可以启用enulateHTTP现象。启用该选项后，请求会以普通的POST方法发出，并且HTTP头信息的X-HTTP-Method-Override属性会设置为实际的HTTP方法。

如果服务器无法处理PUT，PATCH和DELETE的请求。可以启用enulateHTTP。

启用之后，请求会以普通的POST方法发出，并且HTTP头信息的X-HTTP-Method-Override属性会设置为实例的HTTP方法

Vue.http.options.emulateHTTP = true;

完

本文为原创，转载请注明出处