vue知识点： vue-resource
vue-resource特点
vue-resource插件具有以下特点：
1. 体积小
vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。
2. 支持主流的浏览器
和Vue.js一样，vue-resource除了不支持IE 9以下的浏览器，其他主流的浏览器都支持。
3. 支持Promise API和URI Templates
Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算。
URI Templates表示URI模板，有些类似于ASP.NET MVC的路由模板。
4. 支持拦截器
拦截器是全局的，拦截器可以在请求发送前和发送请求后做一些处理。
拦截器在一些场景下会非常有用，比如请求发送前在headers中设置access_token，或者在请求失败时，提供共通的处理方式。
vue-resource 支持的方法有
get(url, [options])head(url, [options])delete(url, [options])jsonp(url, [options])post(url, [body], [options])put(url, [body], [options])patch(url, [body], [options])
一般来说：他们都可以进行数据的传输，但是为了语义化
get(url, [options]) 一般用于从服务器拿去数据
全局路径配置
methods:{},
http: {
root: "http://1111111"
}
Options
| Parameter | Type | Description |
|---|---|---|
| url | string |
请求的url |
| body | Object, FormData, string |
request body |
| headers | Object |
request headers |
| params | Object |
请求的url参数对象 |
| method | string |
请求的http方法：get post ··· |
| responseType | string |
Type of the response body (e.g. text, blob, json, ...) |
| timeout | number |
请求超时时间单位毫秒 |
| before | function(request) |
请求发送前的处理函数，类似jQuery的beforeSend |
| progress | function(event) |
pprogressEvent的回掉处理函数 |
| credentials | boolean |
b表示跨域请求时是否需要凭证 |
| emulateHTTP | boolean |
发送 PUT, PATCH and DELETE 请求时以 HTTP POST 方式发送，设置请求头 X-HTTP-Method-Override |
| emulateJSON | boolean |
Send request body as application/x-www-form-urlencoded content type |
请求案例
get
{
// GET
this.$http.get('package.json',{
params: {
userId:'111'
},
headers: {
token: 'abcd'
}
}).then(response => {
return response.data;
},error => {
this.msg = error
}).then(blob => {
// use image Blob
});
}
send: function () {
var _this = this;
this.$http({
url:"package.json",
method:"get",
params:{
userId:"103"
},
headers:{
token:"123"
},
timeout:5,
before: function () {
console.log("before init")
}
}).then(function (res) {
this.msg = res.data;
});
}
post
{
// POST /someUrl
this.$http.post('/someUrl', {foo: 'bar'}, {
headers: {
access_token: 'abc'
}
}).then(response => {
//数据在 req.data里面
// get status
response.status;
// get status text
response.statusText;
// get 'Expires' header
response.headers.get('Expires');
// get body data
this.someData = response.body;
}, response => {
// error callback
});
}
sendPost: function () {
var _this = this;
var params = {
username:"sunnyboysoft@163.com",
password:"hdeeciu4ZauaDaWF/g+92R8FqNMVA8zoX0UWHinjRM6ND8PMFP9Bt2dr0vGUzZPKXDkzhOJbn3Le0ZcbCiQ1Nx7AIvsrwMzjcSStWNzdyBftzsJS0xsUrtmhqzqaWquXKQoEYgDrP+mNrv0C2ITSpbs+QOql4fPvNSWeAVu54XE=",
remember:"1",
pwencode:"1",
browser_key:"c1eafecb03c5ef07651fb7bd9a7f4b72",
referer:"http://www.imooc.com"
}
//http://www.imooc.com/passport/user/login
this.$http.post("/login",params).then(function (res) {
console.log("res:"+res.data.msg);
_this.response = res.data;
}, function (error) {
console.log("error:"+error);
_this.response = error;
});
},
jsonp 跨域请求
sendJsonp: function () {
var _this = this;
this.$http.jsonp("http://www.imooc.com/course/ajaxskillcourse?cid=796",{
params:{
userId:"1001"
}
}).then(function (res) {
console.log("res:"+res.data.msg);
_this.response = res.data;
}, function (error) {
console.log("error:"+error);
});
},
全局拦截器
一般用于mounted中
请求处理
Vue.http.interceptors.push(function(request, next) { // modify method request.method = 'POST'; // modify headers request.headers.set('X-CSRF-TOKEN', 'TOKEN'); request.headers.set('Authorization', 'Bearer TOKEN'); // continue to next interceptor next(); });
请求和回应处理
Vue.http.interceptors.push(function(request, next) { // modify request request.method = 'POST'; // continue to next interceptor next(function(response) { // modify response response.body = '...'; }); });
返回响应并停止处理。
Vue.http.interceptors.push(function(request, next) {
// modify request ...
// stop and return response
next(request.respondWith(body, {
status: 404,
statusText: 'Not found'
}));
});
