vue中http请求
前后端采用异步接口进行数据交互,传统情况下,我们采用jquery中的$.ajax()方法来进行异步请求。而在vue中我们并没有引入jquery而是采用了vue的插件vue-resource,它同样对异步请求进行了封装,方便我们同服务端进行数据交互。1、引用及使用cnpm install vue-resource --save-dev 在项目根目录下/src/main.js中:import VueR
·
前后端采用异步接口进行数据交互,传统情况下,我们采用jquery中的$.ajax()方法来进行异步请求。而在vue中我们并没有引入jquery而是采用了vue的插件vue-resource,它同样对异步请求进行了封装,方便我们同服务端进行数据交互。
1、引用及使用
cnpm install vue-resource --save-dev
在项目根目录下/src/main.js中:
import VueResource from 'vue-resource'
Vue.use(VueResource)
此时在vue文件中就可以使用this.$http()进行网络请求。
2、通常在项目中是需要将http请求进行封装的。
为了封装成全局因此使用vuex。
参照 vue的一些总结 这个文章进行配置vuex
配置成功后,将main.js中的VueResource内容去掉,写在vuex中的store.js中
store.js内容如下
import Vue from 'vue'
import Vuex from 'vuex'
import VueResource from 'vue-resource'
Vue.use(Vuex)
Vue.use(VueResource)
export default new Vuex.Store({
state: {
url: 'www.baidu.com'
},
mutations: {
setUrl (state, res) {
// 该方法用来改变全局变量的值
state.url = res
}
}
})
3、在store.js中封装http请求的方法
import Vue from 'vue'
import Vuex from 'vuex'
import VueResource from 'vue-resource'
Vue.use(Vuex)
Vue.use(VueResource)
export default new Vuex.Store({
state: {
// url: 'www.baidu.com'
},
mutations: {
// setUrl (state, res) {
// // 该方法用来改变全局变量的值
// state.url = res
// },
get(state, data) {
Vue.http({
method: 'GET',
url: data.url,
emulateJSON: true
})
.then(function (success) {
// console.log("成功",success)
data.success(success.body);
}, function (error) {
// console.log("错误",error)
data.error(error.body);
})
/*
Vue.http.get("http://test.dcsf.hebeiwanteng.com/api/common/wxParking/getNowTime")
.then((success)=>{
console.log("成功",success)
})
.catch((error)=>{
console.log("失败",error)
})
*/
},
post(state, data) {
Vue.http({
method: 'POST',
url: data.url,
params: data.data,
emulateJSON: true
}).then(function (success) {
data.success(success.body);
}, function (error) {
data.error(error.body);
})
},
delete(state, data) {
Vue.http({
method: 'DELETE',
url: data.url,
params: data.data,
emulateJSON: true
}).then(function (success) {
data.success(success.body);
}, function (error) {
data.error(error.body);
})
},
put(state, data) {
Vue.http({
method: 'PUT',
url: data.url,
params: data.data,
emulateJSON: true
}).then(function (success) {
data.success(success.body);
}, function (error) {
data.error(error.body);
})
},
}
})
此时封装好了http请求。
在vue的文件中调用:
<script>
import { mapState, mapMutations } from 'vuex'
export default {
name: 'HelloWorld',
data () {
return {
}
},
methods: {
...mapMutations(['get','post','delete','put']), //引入方法
},
created() {
let _this = this;
_this.get({
url:"此处写请求地址",
success(success) {
console.log("成功",success)
},
error(error) {
console.log("错误",error)
}
});
}
}
</script>
4、注意:在store.js中使用Vue.http和在vue文件中使用this.$http是一样的。
5、该方法只验证了get请求,其它请求没有做验证。
更多推荐
已为社区贡献4条内容
所有评论(0)