What is vue.resource

vue-resource is a plug-in of [Vue.js]. It can initiate requests and process responses through XMLHttpRequest or JSONP. In other words, what [$.ajax] can do, [vue-resource] ] Plug-ins can do the same.

The operating environment of this tutorial: windows7 system, Vue version 2.9.6, thinkpad t480 computer.

vue-resource features

vue-resource plug-in has the following features:

1. Small size

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

2. Supports mainstream browsers

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

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 represents URI templates, which are somewhat similar to ASP.NET MVC routing templates.

4. Support interceptors

Interceptors are global and 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 sending a request, or providing a common handling method when a request fails.

vue-resource usage

Introduce vue-resource

#

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

Basic syntax

#Introducevue-resource After , you can use http based on the global Vue object, or you can use http based on a certain Vue instance.

// 基于全局Vue对象使用http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
// 在一个Vue实例内使用$http
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 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 writing, and the second is the more concise Lambda writing method of ES 6:

// 传统写法
this.$http.get('/someUrl', [options]).then(function(response){
// 响应成功回调
}, function(response){
// 响应错误回调
});
// Lambda写法
this.$http.get('/someUrl', [options]).then((response) => {
// 响应成功回调
}, (response) => {
// 响应错误回调
});

Related Free learning recommendations: javascript (video)

The above is the detailed content of What is vue.resource. For more information, please follow other related articles on the PHP Chinese website!