vue中http请求

大 | 中 | 小

[

2019/08/28 13:31 | by 刘新修 ]

前后端采用异步接口进行数据交互，传统情况下，我们采用jquery中的$.ajax()方法来进行异步请求。而在vue中我们并没有引入jquery而是采用了vue的插件vue-resource，它同样对异步请求进行了封装，方便我们同服务端进行数据交互。

1、引用及使用

C#代码

在项目根目录下/src/main.js中：

JavaScript代码

此时在vue文件中就可以使用this.$http()进行网络请求。

2、通常在项目中是需要将http请求进行封装的。

为了封装成全局因此使用vuex。

参照 vue的一些总结这个文章进行配置vuex

配置成功后，将main.js中的VueResource内容去掉，写在vuex中的store.js中

store.js内容如下

JavaScript代码

3、在store.js中封装http请求的方法

JavaScript代码

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的文件中调用：

JavaScript代码

4、注意：在store.js中使用Vue.http和在vue文件中使用this.$http是一样的。

5、该方法只验证了get请求，其它请求没有做验证。

刘新修