使用说明 · Axios 中文说明 · 看云
参考的人家的 src/api js 的文件写法

需求

当前页面需要多个 axios 请求，因为需要加 loading 加载动画，所以决定当前页面所有的 axios 请求使用一个大的全屏的加载动画，因此需要知道所有请求的状态（无论失败），到所有的请求全部执行完了之后，再隐藏加载条。

源码

1. src/api/index.js 文件 ``` // 解决 axios 兼容 IE 问题 import ‘core-js/es6/promise’ import axios from ‘axios’ // 解决 axios 数据提交格式与后台不一致的问题 post 使用 qs.stringify() import qs from ‘qs’ import store from ‘../store’;

const baseURL = process.env.NODE_ENV === ‘production’ ? ‘http://xxx.xx.xxx.xx:8080‘ : ‘http://localhost:8080‘

/*基础信息页面 / const basicInformation = { // 获取客户类型数据 getCusBaseInfo() { return axios .get(baseURL + ‘/dictpc/getCusBaseInfo?vip_card=’ + store.getters.getVipCard) }, // 获取关键人 table 数据 getKeyPeopleList() { return axios .get(baseURL + ‘/dictpc/getKeyPeopleList?vip_card=’ + store.getters.getVipCard) }, /*

• 获取客户列表数据 可传参
• @param {object} params
• pageNum 当前的页码数字
• pageSize 每一页的数据条数
• vip_card */ getCusCrmList(params) { const parameter = params || { pageNum: 1, pageSize: 10, vip_card: store.getters.getVipCard || ‘’ } return axios .get(baseURL + ‘/dictpc/getCusCrmList’, { params: parameter}) } }

/*客触记录页面 */ const guestRecord = { // 请求客户类型 getCustomVisit() { return axios .get(baseURL + ‘/dictpc/getCustomVisit?vip_card=’ + store.getters.getVipCard) } }

/*产品订购页面 */ const orderingProduct = { // 请求客户类型 getCustomVisit() { return axios .get(baseURL + ‘/dictpc/getCustomVisit?vip_card=’ + store.getters.getVipCard) } }

/*账户信息页面 / const accountInformation = { /*

• 获取客户列表数据 可传参
• @param {object} params
• pageNum 当前的页码数字
• pageSize 每一页的数据条数
• vip_card */ getAccountInfoList(params) { const parameter = params || { pageNum: 1, pageSize: 10, vip_card: store.getters.getVipCard } return axios .get(baseURL + ‘/dictpc/getAccountInfoList’, { params: parameter}) } }

/*账单信息页面 */ const billingInformation = { // 请求客户类型 getCustomVisit() { const parameter = params || { pageNum: 1, pageSize: 10, vip_card: store.getters.getVipCard } return axios .get(baseURL + ‘/dictpc/getAccountInfoList’, { params: parameter}) } }

/*需求调研页面 */ const requestingResearch = { // 请求客户类型 getCustomVisit() { return axios .get(baseURL + ‘/dictpc/getCustomVisit?vip_card=’ + store.getters.getVipCard) } }

export { basicInformation, guestRecord, orderingProduct, accountInformation, billingInformation, requestingResearch }

2. `.vue` 页面的 `js -> export default{}` 部分

import { basicInformation } from “@/api”; import axios from “axios”;

export default { name: “basicInformation”, data() { return { /**

   * baseTypeData 客户类型获取的数据
   */
  baseTypeData: {},
  // 关键人 table 获取的数据
  keyPeopleList: [],
  // 客户列表获取的数据
  cusCrmList: {},
  // 账号信息 table 数据
  tableData3: []
};

}, computed: {}, created() { const me = this; me.getPageData(); }, methods: { // 获取页面基本数据 getPageData() { const me = this; const loading = me.$loading(); axios .all([ // 获取客户类型数据 basicInformation.getCusBaseInfo(), // 获取关键人 table 数据 basicInformation.getKeyPeopleList(), // 获取客户列表数据 带分页 basicInformation.getCusCrmList() ]) .then( axios.spread(function(cusBaseInfo, keyPeopleList, cusCrmList) { // 请求现在都执行完成 console.log(cusBaseInfo); console.log(keyPeopleList); console.log(cusCrmList);

        cusBaseInfo.data.code === 200 &&
          (me.baseTypeData = cusBaseInfo.data.data);
        keyPeopleList.data.code === 200 &&
          (me.keyPeopleList = keyPeopleList.data.data);
        cusCrmList.data.code === 200 &&
          (me.cusCrmList = cusCrmList.data.data);
        loading.close();
      })
    )
    .catch(error => {
      console.log(error);
      loading.close();
    });
},
handleCurrentChange(val) {
  const me = this;
  console.log(`当前页: ${val}`);
  // 请求页码数据
  basicInformation.getCusCrmList({
    // 当前的页码数字
    pageNum: val,
    // 每一页的数据条数
    pageSize: 10,
    vip_card: me.$store.getters.getVipCard
  });
},
/**
 * 客户列表某一行点击的回调方法
 * http://element-cn.eleme.io/#/zh-CN/component/table
 */
clientRowHandle(row, event, column) {
  console.log(row);
}

} };

```