vuejs-Learning Vue-resource

Overview

Vue-resource is a plug-in for vue.js that can initiate requests and process responses through XMLHttpRequest or JSONP. $.ajax like jquery, but the API is more concise:

The Vue-resource plugin has the following features:

1. Small size

Vue-resource is very small, only about 12KB after compression, only 4.5KB after the service-enabled gzip compression, which is much smaller than the size of jquery.

2. Support for mainstream browsers

Like Vue.js, Vue-resource is supported by other mainstream browsers in addition to browsers that do not support IE 9 below.

3. Support Promise API and URI Templates

Promise is the ES6 characteristic, the Chinese meaning of promise is "prophet", promise object is used for asynchronous computation.
Uri templates represents a URI template, and some route templates are similar to ASP.

4. Support Interceptors

Interceptors are global, and interceptors can do some processing before the request is sent and after the request is sent.
Interceptors are useful in some scenarios, such as setting access_token in headers before a request is sent, or providing common handling when a request fails.

Vue-resource using the introduction Vue-resource

<script src= "Js/vue.js" ></script><script src= "Js/vue-resource.js" ></script>

Basic syntax

After introducing Vue-resource, you can use HTTP based on the global Vue object, or you can use HTTP based on a Vue instance.

// use HTTP based on global Vue object Vue.http.get ('/someurl ', [options]). Then (Successcallback, Errorcallback); Vue.http.post ('/someurl ', [body], [options]). Then (Successcallback, errorcallback); // using $http within a Vue instance this. $http. Get ('/someurl ', [options]). Then (Successcallback, errorcallback); this. $http. Post ('/someurl ', [body], [options]). Then (Successcallback, Errorcallback);

After the request is sent, the method is used then to handle the response result, which then has two parameters, the first parameter is the callback function when the response succeeds, and the second parameter is the callback function when the response fails.

thenThe callback function of the method is also written in two ways, the first is the traditional function notation, the second is the more concise form of the lambda notation for ES 6:

//Traditional notation This. $http. Get ('/someurl ', [options]). Then (function(response) {//responding to a successful callback},function(response) {//Response Error Callback});//Lambda notation This. $http. Get ('/someurl ', [options]). Then (response) = {    //responding to a successful callback}, (response) = {    //Response Error Callback});

PS: People who have done. NET development must have a sense of familiarity with lambda notation.

Supported HTTP methods

Vue-resource's request API is designed in a restful style, and it provides 7 kinds of request APIs:

• get(url, [options])
• head(url, [options])
• delete(url, [options])
• jsonp(url, [options])
• post(url, [body], [options])
• put(url, [body], [options])
• patch(url, [body], [options])

In addition to JSONP, 6 other API names are standard HTTP methods. When the server uses the rest API, the client's coding style and service-side encoding style are nearly consistent, which reduces the communication costs for front-end and back-end developers.

Client Request Method	service-side processing methods
this. $http. Get (...)	Getxxx
this. $http. Post (...)	Postxxx
this. $http. Put (...)	Putxxx
this. $http. Delete (...)	Deletexxx

Options Object

The options option object when sending a request contains the following properties:

Parameters	type	Description
Url	string	The requested URL
Method	string	The HTTP method requested, for example: ' GET ', ' POST ' or other HTTP method
Body	Object,FormDatastring	Request Body
Params	Object	The requested URL parameter object
Headers	Object	Request Header
Timeout	number	Request time-out in milliseconds ( 0 indicates no time-out)
Before	function(request)	The handler function before the request is sent, similar to the Beforesend function of jquery
Progress	function(event)	progressevent Callback handler function
Credientials	boolean	Indicates whether credentials are required when cross-domain requests are used
Emulatehttp	boolean	Send a put, PATCH, delete request as an HTTP post, and set the request header'sX-HTTP-Method-Override
Emulatejson	boolean	Send request body as application/x-www-form-urlencoded content type

The role of Emulatehttp

If the Web server cannot handle the rest-style requests for put, Patch, and delete, you can enable the enulatehttp phenomenon. When this option is enabled, the request is issued as a normal post method, and the properties of the HTTP header information are X-HTTP-Method-Override set to the actual HTTP method.

Vue.http.options.emulateHTTP = true;

The role of Emulatejson

If the Web server cannot process requests that are encoded as Application/json, you can enable the Emulatejson option. When this option is enabled, the request is application/x-www-form-urlencoded used as a MIME type, just like a normal HTML form.

Vue.http.options.emulateJSON = true;

Response Object

The Response object contains the following properties:

Method	type	Description
text ()	string	returns response body
json in string form ()	object	return as a JSON object response body
blob ()	blob	return response body in binary form
properties	type	description
OK	boolean	ring This property is true if the HTTP status code should be between 200~299
status	number	response HTTP status Code
statustext	string	response status text
headers	object	response header

Note: The Vue-resource version of this article is v0.9.3, if you are using a previous version of v0.9.0, the response object is not JSON (), BLOB (), text () of these methods.

Using Inteceptor

Interceptors can do some processing before the request is sent and after the request is sent.

Basic usage

 Vue.http.interceptors.push (Request, next) => { //  ...  //         processing logic before the request is sent  //     ...  Next ((response) => { //  ...  //         processing logic after the request is sent  //         ...  //  Depending on the state of the request, the response parameter is returned to Successcallback or errorcallback  return   response})})  

 Vue.http.interceptors.push (function   (    Request, Next) { //  ...  //     processing logic before the request is sent  //     ...  Next (function   (response) { //  ...  //         processing logic after the request is sent  //         ...  //  Depending on the state of the request, the response parameter is returned to Successcallback or errorcallback  return   response})})  

Before response returns to Successcallback or Errorcallback, you can modify the contents of the response or do some processing.
For example, if the status code of the response is 404, you can display a friendly 404 interface.

Summarize

Vue-resource is a very lightweight plug-in for handling HTTP requests, and it provides two ways to handle HTTP requests:

• Use Vue.http or this. $http
• Use Vue.resource or this. $resource

These two ways are essentially no different, read the Vue-resource source code, you can find that the 2nd way is based on the 1th way to achieve.

Inteceptor can attach some behavior before and after a request, which means that in addition to the process of request processing, other aspects of the request can be controlled by us.

vuejs-Learning Vue-resource