vue-resource HTTP API基础
vue-resource特点vue-resource插件具有以下特点：1. 体积小vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。2. 支持主流的浏览器和Vue.js一样，vue-resource除了不支持IE 9以下的浏览器，其他主流的浏览器都支持。3. 支持Promise A
vue-resource特点
vue-resource插件具有以下特点：
1. 体积小
vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。2. 支持主流的浏览器
和Vue.js一样，vue-resource除了不支持IE 9以下的浏览器，其他主流的浏览器都支持。3. 支持Promise API和URI Templates
Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算。URI Templates表示URI模板，有些类似于ASP.NET MVC的路由模板。
4. 支持拦截器
拦截器是全局的，拦截器可以在请求发送前和发送请求后做一些处理。拦截器在一些场景下会非常有用，比如请求发送前在headers中设置access_token，或者在请求失败时，提供共通的处理方式。
vue-resource使用
引入vue-resource
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
HTTP
The http service can be used globally Vue.http or in a Vue instance this.$http.
Usage
A Vue instance provides the this.$http service which can send HTTP requests. A request method call returns a Promise that resolves to the response. Also the Vue instance will be automatically bound to this in all function callbacks.
{
// GET /someUrl
this.$http.get('/someUrl').then(response => {
// success callback
}, response => {
// error callback
});
}
Methods
Shortcut methods are available for all request types. These methods work globally or in a Vue instance.
// global Vue object
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
// in a Vue instance
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
List of shortcut methods:
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
A request resolves to a response object with the following properties and methods:
| 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 /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
});
}
Fetch an image and use the blob() method to extract the image body content from the response.
{
// GET /image.jpg
this.$http.get('/image.jpg').then(response => {
// resolve to Blob
return response.blob();
}).then(blob => {
// use image Blob
});
}
Interceptors
Interceptors can be defined globally and are used for pre- and postprocessing of a request. If a request is send using this.$http or this.$resource the current Vue instance is available as this in a interceptor callback.
Request processing
Vue.http.interceptors.push(function(request, next) {
// modify method
request.method = 'POST';
// modify headers
request.headers.set('X-CSRF-TOKEN', 'TOKEN');
request.headers.set('Authorization', 'Bearer TOKEN');
// continue to next interceptor
next();
});
Request and Response processing
Vue.http.interceptors.push(function(request, next) {
// modify request
request.method = 'POST';
// continue to next interceptor
next(function(response) {
// modify response
response.body = '...';
});
});
Return a Response and stop processing
Vue.http.interceptors.push(function(request, next) {
// modify request ...
// stop and return response
next(request.respondWith(body, {
status: 404,
statusText: 'Not found'
}));
});
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献3条内容
所有评论(0)