Resource插件简介
Vue.js的插件提供了使用XMLHttpRequest或JSONP 进行Web请求和处理响应的服务
单来说，vue-resource就像jQuery里的$.ajax，用来进行数据交互
Vue-resource的特点
1.体积小
vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。
2.支持主流浏览器
和Vue.js一样，vue-resour ce除了不支持IE 9以下的浏览器，其他主流的浏览器都支持。
3.支持Promise API和URI Templates(了解)
Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算。
URI Templates表示URI模板，有些类似于ASP.NET MVC的路由模板。
4.支持拦截器
拦截器是全局的，拦截器可以在请求发送前和发送请求后做一些处理。
Vue-ressource的安装
<script src="https://cdn.jsdelivr.net/vue.resource/1.2.1/vue-resource.min.js"></script> < script src = "https://cdn.jsdelivr.net/vue.resource/1.3.1/vue-resource.min.js" > </ script >
基本使用
1.基于全局Vue对象使用http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
2.在一个Vue实例内使用$http
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback); this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
选项options
url:发送请求的URL
body:作为请求主体发送的数据
headers:标题对象作为HTTP请求表头发送
params:作为url参数发送的参数对象
$http方式数据请求
get
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.2.1/vue-resource.min.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="sendGet()">发送get请求</button>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: "#app",
methods: {
sendGet: function() {
//这里的this指代的是 vm对象
var url = "http://127.0.0.1:3000/login?username=admin&password=123";
this.$http.get(url).then(function(res) {
console.log(res.data)
},function(err){
console.log(err)
})
}
}
})
</script>
post
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.2.1/vue-resource.min.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="sendPost()">发送post请求</button>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: "#app",
methods: {
sendPost: function() {
//这里的this指代的是 vm对象
var url = "http://127.0.0.1:3000/postLogin";
/**
* vue的post参数:如果是普通的post请求,最后一个就是{emulateJSON:true}
*
* 参数一:url
*
* 参数二:data-要传递的数据-对象的形式
*
* 参数三:如果是普通的post请求,最后一个就是{emulateJSON:true}
*
* */
this.$http.post(url, {
username: 'lisi',
password: 'lisi'
}, {
emulateJSON: true
}).then(function(res) {
console.log(res.data)
})
}
}
})
</script>
jsonp
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.2.1/vue-resource.min.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="sendPost()">发送post请求</button>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: "#app",
methods: {
sendPost: function() {
//这里的this指代的是 vm对象
var url = "http://127.0.0.1:3000/postLogin";
/**
* vue的post参数:如果是普通的post请求,最后一个就是{emulateJSON:true}
*
* 参数一:url
*
* 参数二:data-要传递的数据-对象的形式
*
* 参数三:如果是普通的post请求,最后一个就是{emulateJSON:true}
*
* */
this.$http.post(url, {
username: 'lisi',
password: 'lisi'
}, {
emulateJSON: true
}).then(function(res) {
console.log(res.data)
})
}
}
})
</script>
axios具体用来做什么
从浏览器中创建XMLHttpRequests 让HTTP从node.js的请求 支持Promise API 截取请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防范XSRF
axios的基本使用&安装
使用npm安装并引入
npm install axiso
使用cdn
<script src='https://unpkg.com/axios/dist/axios.min.js'> </script>