What is vue.resource

vue-resource is a plug-in of [Vue.js], it can initiate requests and process responses through XMLHttpRequest or JSONP, that is to say, [$.ajax] can do things, [vue-resource] plug-ins can also do To.



The operating environment of this tutorial: windows7 system, Vue 2.9.6 version, this method is suitable for all brand computers.

Features of

vue-resource The vue-resource plug-in has the following features:

1. Small size

vue-resource is very compact, only about 12KB after compression, and only 4.5KB after gzip compression is enabled on the server, which is much smaller than jQuery. .

2. Support mainstream browsers

Like Vue.js, vue-resource does not support browsers below IE 9, but other mainstream browsers.

3. Support Promise API and URI Templates

Promise is a feature of ES6. The Chinese meaning of Promise is "Prophet", and Promise objects are used for asynchronous calculations.

URI Templates represent URI templates, which are somewhat similar to ASP.NET MVC routing templates.

4. Support interceptor The

interceptor is global, and the interceptor can do some processing before and after the request is sent.

Interceptors can be very useful in some scenarios, such as setting access_token in headers before the request is sent, or providing a common processing method when the request fails.

vue-resource use

introduced # vue-resource

. 1

2





basic syntax #

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

1

2

3

4

5

6

// Use http based on the global Vue object

Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);

Vue.http.post('/someUrl', [body ], [options]).then(successCallback, errorCallback);

// Use $http in a Vue instance

this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);

this. $http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

After sending the request, use the then method to process the response result. The then method has two parameters, the first parameter It is the callback function when the response is successful, and the second parameter is the callback function when the response fails.

There are also two ways to write the callback function of the then method, the first is the traditional function, and the second is the more concise ES 6 Lambda:

1

2

3

4

5

6

7

8

9

10

11

12

// Traditional writing

this.$http.get('/someUrl', [options]).then(function(response){ // Response success callback }, function(response){ // Response error callback }); // Lambda writing this.$http.get('/someUrl', [options]).then((response) => { // Response success callback }, (response) => { // Response error callback }); Related free learning recommendations: javascript (video)