vue-resource HTTP

可以使用全局的 Vue.http 或者在 Vue 实例中的 this.$http 调用 HTTP 服务

使用

Vue 实例提供了 this.$http 服务可用于发送 HTTP 请求

1
2
3
4
5
6
7
8
{
// GET /someUrl
this.$http.get('/someUrl').then((response) => {
// success callback
}, (response) => {
// error callback
});
}

方法

所有的请求类型都可以使用短函数,可以在全局或者 Vue 实例中使用。

1
2
3
// 全局 Vue 对象
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
1
2
3
// Vue 实例
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

短方法清单:

1
2
3
4
5
6
7
get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])

选项

url string 请求发送到的 URL
body Object, FormData, string 请求中要发送的数据
headers Object 作为 HTTP 请求头发送的 Headers 对象
params Object 作为 URL 参数发送的 Parameters 对象
method string HTTP 方法 (例如: GET, POST, …)
timeout number 请求超时的毫秒数 (0 为不超时)
before function(request) 在请求发送之前用于修改请求选项的回调函数
progress function(event) 上传时用于控制 ProgressEvent 的回调函数
credentials boolean Indicates whether or not cross-site Access-Control requests should be made using credentials
emulateHTTP boolean 使用 HTTP POST 发送 PUT, PATCH 和 DELETE 请求并设置 X-HTTP-Method-Override 头
emulateJSON boolean 以 application/x-www-form-urlencoded 内容类型发送请求报文

响应

通过下面的属性和函数将请求解析为响应对象:

属性 类型 描述
url string 响应的源 URL
body Object, Blob, string 响应的数据报文
headers Header 响应头对象
ok boolean 从 200 到 299 的 HTTP 状态码
status number 响应中的 HTTP 状态码
statusText string 响应中的 HTTP 状态文本
函数 类型 描述
text() Promise 作为字符串解析报文
json() Promise 作为 Json 对象解析报文
blob() Promise 作为 Blob 对象解析报文

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
// 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');

// set data on vm
this.$set('someData', response.body);

}, (response) => {
// error callback
});
}

获取图像并使用 blob() 方法来从响应中提取图像正文内容

1
2
3
4
5
6
7
8
9
10
11
{
// GET /image.jpg
this.$http.get('/image.jpg').then((response) => {

// resolve to Blob
return response.blob();

}).then(blob) => {
// use image Blob
});
}

拦截器

可以全局定义一个拦截器,用于预处理和后处理的请求。

请求处理

1
2
3
4
5
6
7
8
Vue.http.interceptors.push((request, next) => {

// modify request
request.method = 'POST';

// continue to next interceptor
next();
});

请求和响应处理

1
2
3
4
5
6
7
8
9
10
11
12
13
Vue.http.interceptors.push((request, next)  => {

// modify request
request.method = 'POST';

// continue to next interceptor
next((response) => {

// modify response
response.body = '...';

});
});

返回一个响应并停止处理

1
2
3
4
5
6
7
8
9
10
Vue.http.interceptors.push((request, next) => {

// modify request ...

// stop and return response
next(request.respondWith(body, {
status: 404,
statusText: 'Not found'
}));
});

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :