vue 封装axios和自定义函数的两种方式

Posted 2020-11-22 仅仅菜鸡

在项目中难免有一些重复的操作，比如读取数据等，此时把这些操作封装起来就很有必要了

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();
　　},