這個封裝方法不用在main.js中引入axios兔跌，也不用將axios掛到原型鏈上

在src下創(chuàng)建api文件夾曼玩，在api文件夾下創(chuàng)建network.js和index.js文件：

image.png

在network.js對axios進行全局配置并封裝：

// 導(dǎo)入axios
import axios from 'axios';

// 進行一些全局配置
// 公共路由(網(wǎng)絡(luò)請求地址)
axios.defaults.baseURL = 'http://localhost:8080/api';
// 請求響應(yīng)超時時間
axios.defaults.timeout = 5000;

// 封裝自己的get/post方法
export default {
  get: function(path = '', data = {}) {
    return new Promise(function(resolve, reject) {
      axios.get(path, {
        params: data
      })
        .then(function(response) {
          // 按需求來惩系，這里我需要的是response.data，所以返回response.data揽祥，一般直接返回response
          resolve(response.data);
        })
        .catch(function(error) {
          reject(error);
        });
    });
  },
  post: function(path = '', data = {}) {
    return new Promise(function(resolve, reject) {
      axios.post(path, data)
        .then(function(response) {
          resolve(response.data);
        })
        .catch(function(error) {
          reject(error);
        });
    });
  }
};

index.js：專門用于管理請求各種接口地址卓鹿，配置相應(yīng)代碼:

// 導(dǎo)入封裝好的網(wǎng)絡(luò)請求類工具
import Network from './network';

// 封裝各種接口請求
// export const 接口名 = () => Network.get('/路由',參數(shù)對象);
export const getTable1H2O = () => Network.get('/getStu', { tableName: 'table1H2O' });
export const getTable2H2O = () => Network.get('/getStu', { tableName: 'table2H2O' });
...
...

在請求頁面(e.g. H2O.vue)

data() {
    return {
      dataA: [],
      dataB: []
    };
  },
mounted() {
  //  發(fā)送請求獲取數(shù)據(jù)
    getTable1H2O().then(data => {
      console.log(data);
      this.dataA = data;
    });
    getTable2H2O().then(data => {
      console.log(data);
      this.dataB = data;
    });
  }

注：在這個例子中，兩個請求的路由地址（url）相同（都是/getStu）睬隶，只是參數(shù)不同锣夹，這個按自己的需求來寫就行