1、axios【vue2.0官方推荐】
axios,基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐
# 安装并引入 axios
1、npm install axios -S 【直接下载axios组件,下载完毕后axios.js就存放在node_modules\axios\dist中】
2、网上直接下载axios.min.js文件,添加到项目中
3、通过script src的方式进行文件的引入
# 代码实现 #
1、引入资源方式
1)下载axios.min.js,添加到项目中
2)使用CDN:
3)npm方式: npm install axios
2、使用axios,直接封装在methods中
1)get方式
axios.get('url', {
params: {
param1: value1,
param2:value2
}
}).then(function (response) {
// response.data中获取ResponseData实体
}).catch(function (error) {
// 发生错误
});
2)post方式:默认json格式
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
}).then(function (response) {
// response.data中获取ResponseData实体
}).catch(function (error) {
// 发生错误
});
注:put、delete类似
2、vue-resource【官方就不再更新维护】
【注意:从 Vue 更新到 2.0 之后,官方就不再更新维护 vue-resource】
1、通过npm的方式在线安装:npm install vue-resource
2、在 github 中下载 vue-resource 的 文件 (在 dist 文件夹下有个 vue-resource.js 文件。)
3、使用 CDN。<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
# 代码实现 #
1、引入资源方式
1)下载vue-resource.js,添加到项目中
2)CDN:http://www.bootcdn.cn/vue-resource/
3)npm install vue-resource 即可 。然后在main.js中配置import VueResource from ‘vue-resource’; 然后用Vue.use(VueResource) 方法启用插件。
2、使用$http,直接封装在methods中
1)get方式
this.$http.get('url',{
param1:value1,
param2:value2
}).then(function(response){
// response.data中获取ResponseData实体
},function(response){
// 发生错误
});
2)post方式
this.$http.post('url',{
param1:value1,
param2:value2
},{
emulateJSON:true
}).then(function(response){
// response.data中获取ResponseData实体
},function(response){
// 发生错误
});
注:put、delete类似
3、Vuex