vue-resource发送Ajax,vue中使用ajax——vue-resource.js

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

2018-1-8    分类: 前端资源

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  ，涉及跨域时 无效，

timeout

number

单位为毫秒的请求超时时间 (0 表示无超时时间)

before

function(request)

请求发送前的处理函数，类似于jQuery的beforeSend函数

progress

function(event)

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('错误回调');

});

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); //

},function(res){

console.log(res.status);

});

}

});