vue中处理并发请求

需求：同时获取多个接口下拉数据

类似与这样的

接口封装，可根据自己封装方法

// 获取角色
export const getPersonnelByRole = (role = {}) => {
  return request({
    url: '/project/systemConfig/getPersonnelByRole',
    method: 'GET',
    params: {
      role
    }
  })
}

vue中代码

data() {
    return {
      projectManagerArr: [],
      testOwnerArr: [],
      productManagerArr: [],
      businessOwnerArr: [],
      researchLeaderArr: [],
    }
},
mounted() {
    this.getRole()
},
methods: {
  getRole() {
     let _this = this
     let tempArr = ['projectManager', 'testOwner', 'productManager', 'businessOwner', 'researchLeader']
     for (let index = 0; index < tempArr.length; index++) { // 循环
       const element = tempArr[index] // 挨个去请求一遍
       requireManage.getPersonnelByRole(element).then(function(res) { // 上面接口
         console.log(res, 'getRole')
         let { result } = res
         let str = `${element}Arr`
         _this[str] = result // 在data中定义的
       })
     }
   },
}

HTML用法

<template>
  <el-select v-model="form.projectManagerId" placeholder="请选择产品经理" filterable  clearable>
     <el-option
       v-for="(item,key) in projectManagerArr"
       :key="key"
       :label="item.employeeName"
       :value="item.id"
     ></el-option>
   </el-select>
</template>

最后看一下获取的数据