vue中使用ajax——vue-resource.js

vue可以在全局环境中使用和局部环境使用

// 基于全局Vue对象使用http
Vue.http.get('/someUrl', [options]).then(function(){ console.log('成功回调') }, function(){ console.log('失败回调') });
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
或者
Vue.http({
  url: 'http://example.com/book',
  method: 'JSONP',
  jsonp: 'cb'
});

// 在一个Vue实例内使用$http
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

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

emulateHTTP
emulateHTTP（布尔值）。默认值为:false，设置值为true时，PUT, PATCH和DELETE等请求会以普通的POST方法发出，并且HTTP头信息的X-HTTP-Method-Override属性会设置为实际的HTTP方法。。

emulateJSON
emulateJSON(布尔值)。默认值为：false,设置值为true时，数据（无论是get还是post）都会以formdata（表单提交方式）的形式发送数据。所以我们在给后台传递参数的时候需要加JSON.stringify(参数)处理一下。
如果服务器无法处理编码为application/json的请求，可以启用emulateJSON选项。启用之后，请求会以application/x-www-form-urlencoded为MIME type，就像普通的HTML表单一样。

全局设置：

Vue.http.options.emulateHTTP = true;
Vue.http.options.emulateJSON = true;

get:

this.$http.get('get.php',{params:{a:1,b:2}}).then(function(res){
    alert(res.body); 
 },function(res){
    console.log(res.status);
});

post:

客户端要发数据给后台时

this.$http.post('post.php',{a:1,b:2}},{emulateJSON:true}).then(function(res){
    alert(res.body); 
 },function(res){
    console.log(res.status);
});

jsonp:

url ：https://sug.so.360.cn/suggest?callback=suggest_so&word=a

new Vue({
  el:'#app',
  mounted:function () {
     this.$http.jsonp('https://sug.so.360.cn/suggest',{
        params:{word:'a'},  //传给服务器的参数
        jsonp:'callback',   //服务器那边接收的字段 $_POST['callback']
        headers: {"xxx": "xxxx"}  //客户端自定义请求头信息传给服务器，但是在跨域情况下无效。
     }).then(function(res){
        console.log(res.data);
     },function(res){
        console.log('失败');
     });
  }
});


//另一种格式

this.$http({
   url: 'https://sug.so.360.cn/suggest',
   params: {
      word:'a'
   },
   method: 'JSONP',
   jsonp: 'callback'  //一般默认都是callback，如果有变化根据接口的规则来，例如/suggest?callback187=suggest_so，改成jsonp: 'callback187'
}).then(function (res) {
    console.log(res.body);
}, function (res) {
    console.log('错误回调');
});

跨域相关内容查看：https://sdeno.com/?p=3647

interceptors数据劫持类似before 、after

Vue.http.interceptors.push(function(request, next) {
     // ...
     // 请求发送前的处理逻辑 (类似$.ajax的beforeSend,在请求服务器的url之前，做一些处理之后在请求)
     // ...
     request.params.c='sdf'; //例如：在请求服务器url前，突然又想额外加一个参数
     request.headers.set('Server', 'asfsdf222');  //这里设置请求头，也就是客户端发给服务器的Request headers,在服务器那里接收
  next(function(response) {
     // ...
     // 请求发送后的处理逻辑 （当客户端请求后台数据时，后台即将要发数据给客户端之前，这里又可以额外的做一些处理）
     // ...
     // 根据请求的状态，response参数会返回给successCallback或errorCallback
     response.body=response.body+'1231323';
     return response
  })
});



new Vue({
   el:'#app',
   mounted:function () {
       this.$http.get('http://www.vc.com/v3/blank',{params:{a:1,b:2}}).then(function(res){  //请求url前又额外添加了一个参数c=sdf
           // alert(res.body);
           console.log(res.body); //<---这里返回的数据内容多了'1231323' 
       },function(res){
           console.log(res.status);
       });
   }
});

http://www.jb51.net/article/103159.htm