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

敲键盘的猫

5001人浏览 · 2017-04-08 12:30:48

敲键盘的猫 · 2017-04-08 12:30:48 发布

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'
  }));
});

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^