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 相关文章推荐
jquery的父子兄弟节点查找示例代码
Mar 03 Javascript
JavaScript简单实现鼠标拖动选择功能
Mar 06 Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 Javascript
JavaScript返回0-1之间随机数的方法
Apr 06 Javascript
javascript定义类和类的实现实例详解
Dec 01 Javascript
JS设置cookie、读取cookie
Feb 24 Javascript
基于Bootstrap实现tab标签切换效果
Apr 15 Javascript
JavaScript中的对象和原型(一)
Aug 12 Javascript
vue鼠标悬停事件实例详解
Apr 01 Javascript
javascript实现弹幕墙效果
Nov 28 Javascript
使用Karma做vue组件单元测试的实现
Jan 16 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 Javascript
小程序开发之模态框组件封装
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
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
php读取xml实例代码
2010/01/28 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
jquery插件之easing使用
2010/08/19 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
vue引入jq插件的实例讲解
2017/09/12 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
Python代码调试的几种方法总结
2015/04/15 Python
Python微信库:itchat的用法详解
2017/08/14 Python
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
基于python log取对数详解
2018/06/08 Python
Sanic框架Cookies操作示例
2018/07/17 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
python音频处理的示例详解
2020/12/23 Python
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
专业毕业生个性的自我评价
2013/10/03 职场文书
金融专业推荐信
2013/11/14 职场文书
见习期自我鉴定范文
2014/03/19 职场文书
委托公证书范本
2014/04/03 职场文书
学校班班通实施方案
2014/06/11 职场文书
研究生简历自我评
2015/03/11 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书
python Tkinter模块使用方法详解
2022/04/07 Python