同一接口请求不同数据简便写法

在业务中，需要通过同一个接口，不同的token来请求不同的服务单信息并存储到相应的数组中去。和之前相比，代码更为精简。

首先我将每种服务单所对应的token和我定义的对应的数据列表用map结构存储起来。

let installList = []; // 安装单数据
let returnList = [];  // 退换货数据
let repairList = [];  // 维修单数据
let surveyList = [];  // 勘察单数据
export const serviceMap = {
  //安装
  'install': {
    token: '637b16f3a111111111111111',
    list: installList
  },
  //退换货
  'return': {
    token: '637b16f11111111111111111',
    list: returnList
  },
  // 维修
  'repair': {
    token: '637b16f3a111111111111111',
    list: repairList
  },
  //勘察
  'survey': {
    token: '637b16f3af11111111111111',
    list: surveyList
  }
}

然后在需要使用的页面引用并获取相应数据。

import {serviceMap} from '@/util/static.js'
​
export default {
  name: "page",
  data() {
      return {
          serviceMap: serviceMap,
          serviceList: ['install', 'return', 'repair', 'survey']
      }
  },
  mounted(){
        this.serviceList.forEach(item => {
        // 获取对应服务单的token  
        let token = serviceMap[item].token
        this.$axios
          .$post(url,{"token": token})
            .then(res => {
          //  为每个服务单的list赋值
             serviceMap[item].list = res.data.content
            })
        })  
 }

HTML中使用

// 遍历我们获取到的安装单数据列表
<div v-for="(item,index) in serviceMap['install'].list" :key="index">
    
</div>