VUE如何在另一个函数中调用另一个函数运算后的结果

首先在最外层声明一个公用的变量/数组

let arr = ref([])

 这是第一个函数,示例为将excel表格类文件 转换为json格式数组,并且结果为 result

  async function onChange(e) {
    const file = e.target.files[0]
    const reader = new FileReader()
    reader.readAsBinaryString(file)
    reader.onload = function (e) {
      const data = e.target.result
      const zzexcel = read(data, {
        type: 'binary',
      })
      console.log('zzexcel', zzexcel)
      const result = []
      for (let i = 0; i < zzexcel.SheetNames.length; i++) {
        const newData = utils.sheet_to_json(zzexcel.Sheets[zzexcel.SheetNames[i]], {
          range: 3,
          header: [
            'id',
            'oneOrgName',
            'twoOrgName',
            'positionName',
            'unitName',
            'deviceName',
            'professionName',
            'partName',
            'encoding',
            'specification',
            'manufacturer',
            'useTime',
            'peopleNum',
            'level',
            'userCode',
          ],
          defval: '',
        })
        result.push(...newData );
        arr.value = result
      }
    }
  }

通过最后一行代码可以看出将声明的 arr 赋值通过第一个函数运算出的结果result

接下来就可以在下面函数中继续使用result的结果了,下面函数中的arr.value就为经过上面函数运算的结果result数组

function sumbitUpload() {
    setModalProps({ loading: true })
    let array = JSON.parse(
      JSON.stringify(arr.value)
        .replace(/机械/g, '1')
        .replace(/电气/g, '2')
        .replace(/仪表/g, '3')
        .replace(/液压/g, '4')
        .replace(/自动化/g, '5')
        .replace(/信息化/g, '6'),
    )
    console.log(array)
    Import(array).then((res) => {
      const taskdata = res.Data
      ReadJobProcess(taskdata).then((res) => {
        const process = res.Content
      })
      ReadJobReport(taskdata).then((res) => {
        const report = res.Content
      })
    })
    createSuccessModal({ content: '操作完成' })
    closeModal()
  }

分享完毕,感谢观看!!!

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue是一种基于JavaScript前端开发框架,它支持组件化开发和数据驱动视图的方式。当一个接口出现多次调用时,可以通过以下几种方式来处理: 1. 将接口调用抽象为一个独立的函数方法,然后在需要调用该接口的地方直接调用函数方法。这样可以避免多次重复的接口调用代码,提高代码的复用性和可维护性。 2. 使用Vue的计算属性来处理接口调用。计算属性会根据依赖的数据动态计算得出一个新值,并在数据更新时自动重新计算。可以将接口调用作为依赖的数据,在计算属性处理接口调用返回结果。这样可以确保接口调用只执行一次,并且在数据更新时自动重新调用接口。 3. 使用Vue的生命周期钩子函数来处理接口调用。将接口调用放在适当的生命周期钩子函数,例如created钩子函数,在组件创建之后立即调用接口。这样可以确保接口调用只执行一次,并且确保在组件创建之后立即获取到接口数据。 4. 使用Vuevuex状态管理来处理接口调用。将接口调用和接口返回的数据存储在vuex的状态管理,然后在需要使用接口数据的地方直接从vuex获取。这样可以确保接口调用只执行一次,并且在整个应用共享接口数据。 总之,对于一个接口出现多次调用的情况,我们可以通过抽象函数、计算属性、生命周期钩子函数vuex状态管理等方法来处理,以提高代码的复用性和性能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值