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