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


Posted in Javascript onApril 24, 2020

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处做文章。

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

当然,经过尝试,发现类似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内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 对Cookie 操作的封装小结
Dec 31 Javascript
Jquery 实现Tab效果 思路是js思路
Mar 02 Javascript
node.js中的dns.getServers方法使用说明
Dec 08 Javascript
js实现从数组里随机获取元素
Jan 12 Javascript
JS组件Bootstrap Select2使用方法详解
Apr 17 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
js实现砖头在页面拖拉效果
Nov 20 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
Mar 21 Javascript
详解Vue中localstorage和sessionstorage的使用
Dec 22 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 Javascript
实例讲解JS中pop使用方法
Jan 27 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
小程序开发之模态框组件封装
Apr 23 #Javascript
详解Vue3中对VDOM的改进
Apr 23 #Javascript
微信小程序实现滑动操作代码
Apr 23 #Javascript
微信小程序图片右边加两行文字的代码
Apr 23 #Javascript
Vue中通过vue-router实现命名视图的问题
Apr 23 #Javascript
利用原生JS实现欢乐水果机小游戏
Apr 23 #Javascript
JS eval代码快速解密实例解析
Apr 23 #Javascript
You might like
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
浅谈php处理后端&接口访问超时的解决方法
2016/10/29 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
javascript自动生成包含数字与字符的随机字符串
2015/02/09 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
微信小程序页面调用自定义组件内的事件详解
2019/09/12 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
通过angular CDK实现页面元素拖放的步骤详解
2020/07/01 Javascript
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
Python文件夹与文件的操作实现代码
2014/07/13 Python
python中os模块详解
2016/10/14 Python
PyCharm在win10的64位系统安装实例
2017/11/26 Python
Python BS4库的安装与使用详解
2018/08/08 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
python实现词法分析器
2019/01/31 Python
python定位xpath 节点位置的方法
2019/08/27 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
JSF面试题:Jsf中导航的标签是什么
2013/04/20 面试题
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
火车的故事教学反思
2014/02/11 职场文书
幼儿园大班评语大全
2014/04/17 职场文书
家长会演讲稿
2014/04/26 职场文书
学校标语大全
2014/06/19 职场文书
购房协议书范本
2014/10/02 职场文书
Pandas数据结构之Series的使用
2022/03/31 Python
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js