Vue resource Implementation ajax Request and Cross Domain Request Sample

vue-resource is a physical http request plug-in provided by Vue, like $. ajax in jQuery, for interacting with the back end.

When you use it, you first need to install the vue-resource plug-in

1. Install on projects and directories:

npm install vue-resource 

2. Introducing the resource plug-in

import VueResource from 'vue-resource'; 
Vue.use(VueResource) 

3. Send a request:

this.$http.get("http://www.vrserver.applinzi.com/aixianfeng/apihome.php").then(function(res){ 
  console.log(res) 
 }) 

ES6 Writing:

this.$http.get('url', [options]).then((res) => { 
//  Handle successful results }, (res) => { //  Processing the result of failure }); 

After sending the request, the then method is used 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 then method, the first is the traditional function writing method, and the second is the more concise Lambda writing method of ES 6:

POST request:

this.$http.post("http://www.vrserver.applinzi.com/aixianfeng/apihome.php",{name:"abc"},{emulateJSON:true}).then( 
   function (res) { 
    //  Handle successful results  
    alert(res.body); 
   },function (res) { 
   //  Processing the result of failure  
   } 
  );

JSONP request:

new Vue({ ready() { 
 this.$http.jsonp('/url', {name:"abc"}) .then(function (res){ 
  console.log(res) 
 }, function (res) { 
  console.log(res) 
  }); 
 } 
})

Tucao 1, now should not use JSON, some words really ha ha ha.

Supported HTTP methods

The request for vue-resource, API, is designed in the style of REST and provides seven requests for API:

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, the other six API names are standard HTTP methods. When the server uses REST API, the coding style of the client is almost the same as that of the server, which can reduce the communication cost between front-end and back-end developers.

客户端请求方法	服务端处理方法
this.$http.get(...)	Getxxx
this.$http.post(...)	Postxxx
this.$http.put(...)	Putxxx
this.$http.delete(...)	Deletexxx

options Object

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

参数	类型	描述
url	string	请求的URL
method	string	请求的HTTP方法，例如：'GET', 'POST'或其他HTTP方法
body	Object, FormDatastring	request body
params	Object	请求的URL参数对象
headers	Object	request header
timeout	number	单位为毫秒的请求超时时间 (0 表示无超时时间)
before	function(request)	请求发送前的处理函数，类似于jQuery的beforeSend函数
progress	function(event)	ProgressEvent回调处理函数
credientials	boolean	表示跨域请求时是否需要使用凭证
emulateHTTP	boolean	发送PUT, PATCH, DELETE请求时以HTTP POST的方式发送，并设置请求头的X-HTTP-Method-Override
emulateJSON	boolean	将request body以application/x-www-form-urlencoded content type发送

Role of emulateHTTP

If the Web server cannot handle REST-style requests such as PUT, PATCH, and DELETE, you can enable the enulateHTTP phenomenon. When this option is enabled, the request is made in the normal POST method, and the X-HTTP-Method-Override property of the HTTP header information is set to the actual HTTP method.

Vue.http.options.emulateHTTP = true;

Role of emulateJSON

If the Web server cannot handle requests encoded as application/json, you can enable the emulateJSON option. When this option is enabled, the request takes application/x-www-form-urlencoded as MIME type, just like the normal HTML Form 1.

Vue.http.options.emulateJSON = true;

response Object

The response object contains the following properties:

方法	类型	描述
text()	string	以string形式返回response body
json()	Object	以JSON对象形式返回response body
blob()	Blob	以2进制形式返回response body
属性	类型	描述
ok	boolean	响应的HTTP状态码在200~299之间时，该属性为true
status	number	响应的HTTP状态码
statusText	string	响应的状态文本
headers	Object	响应头