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

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

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

3.使用js封装(优点:可以获取vue对象,然后封装一些自定义操作，由于是个js文件，可以多个项目通用)

//  封装的main.js:

　　export default {

　　　　install (Vue) {

　　　　　　let Vue_;　　// 自定义一个dom属性　　　　　　

　　　　　　// 获取vue对象
　　　　　　Vue.prototype.Loading_ = e => {
　　　　　　　　Vue_ = e;
　　　　　　　　return;
　　　　　　}

　　　　　　// 封装axios请求并自定义操作

　　　　　　Vue.prototype.getData_ = (Url, Params) => {
　　　　　　　　return new Promise ((resolve, reject) => {
　　　　　　　　　　Vue_.allCheck = false;
　　　　　　　　　　Vue_.checkItem = [];
　　　　　　　　　　Vue_.axios.get(Url,
　　　　　　　　　　　　{ // 通过这种方式解决模糊匹配后台报空指针异常的问题
　　　　　　　　　　　　　　params: Params
　　　　　　　　　　　　}
　　　　　　　　　　)
　　　　　　　　　　.then(data => {
　　　　　　　　　　　　let res = data.data;
　　　　　　　　　　　　Vue_.listData = []; // 自定义清空存放数据的数据
　　　　　　　　　　　　Vue_.pages.maxNum = res.total;　　// 自定义设置页面总页数
　　　　　　　　　　　　data = res.data;
　　　　　　　　　　　　if(data.length === 0) {
　　　　　　　　　　　　　　Vue_.$message({
　　　　　　　　　　　　　　　　message: '暂无数据!',
　　　　　　　　　　　　　　　　type: 'warning'
　　　　　　　　　　　　　　});
　　　　　　　　　　　　　　Vue_.pages.maxNum = 0;
　　　　　　　　　　　　} 
　　　　　　　　　　　　resolve(data);　　// 返回数据
　　　　　　　　　　})
　　　　　　　　　　.catch(err => {
　　　　　　　　　　　　console.log(err);
　　　　　　　　　　});
　　　　　　　　})
　　　　　　}

　　　　}

　　}

入口文件main.js:

　　import custom from '@/assets/js/main'
　　Vue.use(custom);

vue页面中:　

　　methods: {

　　　　// 获取数据
　　　　　　getData() {
　　　　　　　　let Params = {
　　　　　　　　　　'startPage': this.pages.nowPage,
　　　　　　　　　　'limit': this.pages.pageSize,
　　　　　　　　};
　　　　　　　　this.getData_(this.$store.state.Url5 + 'user/queryOrganUser', Params).then(data => {
　　　　　　　　　　this.listData = data;
　　　　　　　　})
　　　　},

　　}，

　　mounted() {
　　　　this.Loading_(this);　// 触发自定义loading事件
　　　　this.getData();
　　},