Vue通过getAction的finally来最大程度避免影响主数据呈现问题

 更新时间:2020年04月24日 08:19:18   作者:buguge  
这篇文章主要介绍了Vue通过getAction的finally来最大程度避免影响主数据呈现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

企业信息列表,查看某条记录时,弹窗页里要求展示企业的用户名,而用户名字段不在企业表里。

为此,我们需要修改弹窗页的渲染方法。

methods: {

 enterpriseInfo (record) {
  this.form.resetFields();
  let product;
  if(record.product == 'HUICHUXING'){
   product = '惠出行';
  }else if(record.product == 'BOSSKG'){
   product = 'BOSS开工';
  }else if(record.product == 'HUICHUXING,BOSSKG' || record.product == 'BOSSKG,HUICHUXING'){
   product = '惠出行,BOSS开工';
  }else{
   product = '业务未开通';
  }
  this.model = Object.assign({}, record);
  this.model.product = product;
  this.visible = true;
  this.$nextTick(() => {
   this.form.setFieldsValue(pick(this.model,'enterpriseName','address','legalName','email','phone','userName','licensePic',
    'ipList','taxpayerNo','billAddress','bankName','bankCardNo','billPhone','product'));
  });
 }
}

我的想法很清晰,recoord代表的是指定的企业的信息,在this.visible = true;前,给this.model.userName属性重新赋值。

服务端接口很快实现了。不过,修改这个vue页面的时候倒是吃力了。对于Jeecg-boot 的这套前段UI框架Ant Design Jeecg Vue,虽然已经跟了几个项目了,依然是一知半解。

自然是通过getAction来赋值了,然并卵。因为getAction是异步请求,所以,肯定是不起作用了。

那么,该怎么办呢?

一个小伙给出了方案,当然,这也是我不得已而为之的方案————在getAction请求成功的方法里,给userName赋值,然后,再进行页面渲染。

methods: {

 enterpriseInfo (record) {
  ......
  this.visible = true;
  getAction('/ent/getEnterpriseLoginAcc?enterpriseId=' + record.enterpriseId).then(response => {
   record.userName = response.result.loginAcc;
   this.model = Object.assign({}, record);
   this.$nextTick(() => {
    this.form.setFieldsValue(pick(this.model, 'enterpriseName', 'address', 'legalName', 'email', 'phone', 'userName', 'licensePic', 'taxpayerNo', 'billAddress', 'bankName', 'bankCardNo', 'billPhone', 'product', 'industryType1', 'industryType2'));
   });
  });
  
 }
}

这样虽然实现了,但与我的想法有些不一致。怎么讲?假如说,执行getAction出问题,那么整个页面将无法呈现。这岂不因小失大!

后来,问一个前端的同事,终于指点了迷津。 同事发的如下这个示意图,提示可在1处、2处做文章。

当然,经过尝试,发现类似getAction\postAction\putAction除了.then()、.catch()外,还有finally()。那看来,在没有其他方案的情况下,————也许没有其他方案了————这是最好的方案了,也符合我的期望。

methods: {

 enterpriseInfo (record) {
  ......
  this.visible = true;
  this.$nextTick(() => {
   getAction('/ent/getEnterpriseLoginAcc?enterpriseId='+record.enterpriseId).then(res => {
    if(res.success) {
     this.model.userName = res.result.loginAcc;
    }
   }).finally(() => {
    // console.log("userName= "+this.model.userName)
    this.form.setFieldsValue(pick(this.model,'enterpriseName','address','legalName','email','phone','userName','licensePic',
     'ipList','taxpayerNo','billAddress','bankName','bankCardNo','billPhone','product','industryType1','industryType2'));

   });

  });
  
 }
}

到此这篇关于Vue通过getAction的finally来最大程度避免影响主数据呈现的文章就介绍到这了,更多相关vue getAction finally内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue.js $refs用法案例详解

    Vue.js $refs用法案例详解

    这篇文章主要介绍了Vue.js $refs用法案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • 详解vue模拟加载更多功能(数据追加)

    详解vue模拟加载更多功能(数据追加)

    本篇文章主要介绍了vue模拟加载更多功能(数据追加),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • Vue 3开发中VueUse强大Hooks库

    Vue 3开发中VueUse强大Hooks库

    VueUse提供了一个丰富且强大的Hooks库,可以帮助开发者快速实现各种功能,提高开发效率,本文来详细的介绍一下,需要的朋友们下面随着小编来一起学习学习吧
    2024-08-08
  • vue动画打包后失效问题的解决方法

    vue动画打包后失效问题的解决方法

    这篇文章主要介绍了vue动画打包后失效问题的解决方法,在文中给大家提到了vue-cli 打包后自定义动画未执行的解决方法,需要的朋友可以参考下
    2018-09-09
  • vue发送websocket请求和http post请求的实例代码

    vue发送websocket请求和http post请求的实例代码

    这篇文章主要介绍了vue发送websocket请求和http post请求的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-07-07
  • 基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)

    基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)

    为了快速体验 MVVM 模式,我选择了非工程化方式来起步,并选择使用 Vue.js,以及基于它构建的 iView UI 框架。本文给大家分享基于 Vue.js 之 iView UI 框架非工程化实践记录,需要的朋友参考下吧
    2017-11-11
  • vscode中vue代码提示与补全没反应解决(vetur问题)

    vscode中vue代码提示与补全没反应解决(vetur问题)

    这篇文章主要给大家介绍了关于vscode中vue代码提示与补全没反应解决(vetur问题)的相关资料,文中通过图文将解决的方法介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • vue项目实现图片懒加载的简单步骤

    vue项目实现图片懒加载的简单步骤

    懒加载的好处在于减少服务器的压力,在网络比较慢的情况下,可以提前给这张图片添加一个占位图片,提高用户的体验,这篇文章主要给大家介绍了关于vue项目实现图片懒加载的相关资料,需要的朋友可以参考下
    2022-09-09
  • vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作

    vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作

    这篇文章主要介绍了vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue实战中的一些实用小魔法汇总

    vue实战中的一些实用小魔法汇总

    这篇文章主要给大家介绍了关于vue实战中一些实用小魔法的相关资料,这些技巧和窍门,可以帮助你成为更好的Vue开发人员,需要的朋友可以参考下
    2021-06-06

最新评论