在项目中难免有一些重复的操作,比如读取数据等,此时把这些操作封装起来就很有必要了
1.在main.js中封装,在vue页面中获取数据(优点:不需要import操作,挂载在this中,可以获取vue对象,然后封装一些自定义操作)
main.js中:
import Vue from ‘vue‘
import Axios from ‘axios‘
import ElementUI from ‘element-ui‘
var that;
Vue.prototype.loading = (e) => {
that = e;
}
Vue.prototype.getData = (Url, Params) => {
return new Promise ((resolve,reject) => {
Axios.get(Url,
{
params: Params
}
)
.then(function(data) {
data.data.data ? data = data.data.data : data = data.data;
if(data.length === 0) {
Vue.prototype.$message({
message: ‘暂无数据!‘,
type: ‘warning‘
});
return false;
}
resolve(data)
})
.catch(function (err) {
console.log(err)
});
})
}
vue页面中:
mounted() {
this.loading(this);
this.getData(this.$store.state.Url3 ‘station/findStationAll‘).then(data => {
console.log(data)
})
},
此时已经成功获取了接口中的数据
2.在外部js中封装(优点:也可以获取vue对象,然后封装一些自定义操作,比如在js文件中获取到接口数据后对vue页面中的数据进行操作)
js文件:
var Vue;
export var loading = function(e) {
Vue = e;
}
export var getData = function(Url, Params) {
Vue.axios.get(Url,
{
params: Params
}
)
.then(function(data) {
Vue.listData = []; // 清空数组
Vue.pages.maxNum = res.total; // 修改分页器最大条数
data.data.data ? data = data.data.data : data = data.data;
if(data.length === 0) {
Vue.$message({
message: ‘暂无数据!‘,
type: ‘warning‘
});
return false;
}
Vue.receiveData(Url.substring(Url.lastIndexOf(‘/‘) 1, Url.length), data); // 把接口地址返回用来区分返回值
})
.catch(function (err) {
console.log(err)
});
}
vue文件:
import { loading, getData } from ‘../../../static/js/main‘
methods: {
// 获取数据
getData() {
let Params = {
// 传递的参数
};
getData(this.$store.state.Url3 ‘station/findStationAll‘‘, Params);
},
// 接收数据
receiveData(Url, data) {
if(Url === ‘findStationAll‘) {
console.log(data) // 得到数据
}
}
},
mounted() {
loading(this); // 把vue对象注入函数
this.getData();
},