vue项目axios请求封装

这个封装方法不用在main.js中引入axios，也不用将axios挂到原型链上

在src下创建api文件夹，在api文件夹下创建network.js和index.js文件：

image.png

在network.js对axios进行全局配置并封装：

// 导入axios
import axios from 'axios';

// 进行一些全局配置
// 公共路由(网络请求地址)
axios.defaults.baseURL = 'http://localhost:8080/api';
// 请求响应超时时间
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：专门用于管理请求各种接口地址，配置相应代码:

// 导入封装好的网络请求类工具
import Network from './network';

// 封装各种接口请求
// export const 接口名 = () => Network.get('/路由',参数对象);
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() {
  //  发送请求获取数据
    getTable1H2O().then(data => {
      console.log(data);
      this.dataA = data;
    });
    getTable2H2O().then(data => {
      console.log(data);
      this.dataB = data;
    });
  }

注：在这个例子中，两个请求的路由地址（url）相同（都是/getStu），只是参数不同，这个按自己的需求来写就行