vue处理异步问题,vue实现异步
本文主要介绍vue踩不到的异步坑及其解决方法，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
:
目录
1.任务需求分析1.1两页，两个组件1.2需求描述2。功能是如何实现的？2.1用前端思维消化需求2.2代码实现(简化版)2.3代码翻译3。你遇到了什么问题？4.问题是怎么解决的？4.1问题分析4.2开始解决4.3断点调试神威Js的异步确实完美解决了单线程的问题，但是也带来了很多问题。而且随着使用的框架越来越多，越来越复杂，定位的难度也变得更高。
不知道为什么，总觉得Vue的断点调试比不使用框架更难用，这可能是我花了一个小时才找到问题根源的原因。废话少说，下面是问题的全过程，以及发现问题的过程和逻辑。
1. 任务需求分析
1.1 两个页面，两个组件
该任务涉及两个页面和两个组件之间的恩怨，它们的关系如下：
1.2 需求描述
用户管理和权限管理是并排的两个页面。单击用户管理，这是由userTable组件显示的用户列表。打开权限管理页面，然后点击页面上的群组成员按钮，弹出modalUserList弹出组件。modalUserList是由userTable组件显示的用户列表。当您单击用户管理时，您将看到所有用户的列表。当您单击权限管理，然后单击组成员时，您将看到属于该组的成员列表。
2. 功能是如何实现的？
2.1 以前端思维消化需求
这两个页面使用相同的组件userTable，但是它们需要不同的表示。所以我们需要一个tabletype字段来标识哪个页面当前引用了userTable组件。在点击用户权限管理页面时，他的孙子userTable需要根据用户点击的记录id获取该组的用户信息，涉及两层父子组件通信，不方便，所以使用vuex进行处理。
2.2 代码实现 (简化版)
用户管理页面是指用户表组件的代码用户表。
:tableType=1
:用户列表=用户列表/用户表
管理页面引用modalUserList组件的代码modalUserList。
@closeModal=CloseModal
:id=chosenGroupId
:show= show user list /modalUserList
modalUserList组件引用userTable组件的代码userTable。
:tableType=2
:用户列表=用户列表/用户表
代码ShowGroupUserList(索引，行){
this.showUserList=true
//通知孙子获取用户列表
this . setauthgetuserlisttrue()//通知孙子组件发送ajax请求获取数据。
这个。SetAuthGroupId(row.id) //设置AuthGroupId
}
安装了用户表组件并安装了观察器代码(){
这个。GetUserList()
//权限管理。只有当你点击按钮时，你才能得到用户列表。
//点击权限管理的群成员按钮进入。
if (this.authGetUserList) {
这个。GetUserListByGroupId(this . auth groupid)
//再次将刷新设置为false
这个。SetAuthGetUserListFalse()
}
}
观察：{
authGetUserList: function (newV，oldV) {
//检查是否需要根据选择的权限组获取用户列表。
if (newV) {
console.log(this.tableType)
if (this.tableType==1) {
这个。GetUserList()
}否则{
这个。GetUserListByGroupId(this . auth groupid)
}
//再次将刷新设置为false
这个。SetAuthGetUserListFalse()
}
}
}
2.3 代码翻译
虽然贴了这么多代码，但是都是碎片化的，可能一时半会难以理解其中的逻辑，所以这里稍微解释一下。以上代码翻译成中文后，大意如下：
用tableType来区分。如果从用户管理页面访问，userTable组件直接使用GetUserList方法获取所有用户的列表并显示出来。如果从权限管理页面访问，在用户点击组成员按钮的瞬间，权限管理页面发送通知，告知userTable组件使用用户选择的行id，获取属于权限组的用户列表并显示(2.2中的后两个代码)。
3. 遇到了什么问题？
高级用户管理页面，然后进入权限管理页面。单击group member按钮将显示所有高概率用户的列表，而不仅仅是右边组中的用户列表。直接在权限管理页面点击组成员按钮，会显示一个低概率所有用户的列表。
4. 问题是如何解决的？
4.1 问题分析
分析问题的表现形式，关于问题大概有以下两种猜测：
由于tableType类型的值传递错误，表显示数据出错。由于异步数据加载较慢，本次采集数据前已显示弹出框，显示内容为上次遗留的数据。这次获取数据后，由于某种原因没有触发页面重绘。
4.2 开始解决
检查代码后发现tableType的值传递没有错误。第一个猜测不成立，所以大概率是数据采集不同步导致的问题。(虽然我想不通为什么获取数据后不触发页面重绘)
可能解决异步问题的一个猜想是：等到数据加载完成后再显示子弹框，而不是等到用户点击按钮的那一刻(以孙组件之间的通信为代价)，所以尽量通知孙组件只有在孙组件加载数据时才显示子弹框(父组件)。尝试失败，因为如果没有首先显示项目符号框，子组件将不会被挂载，然后它将无法与祖父组件通信。
接下来，将首先显示父组件，在子组件成功获取数据后，再显示子组件。想象一下功能成功实现，但是还是没有解决权限管理页面会显示所有用户列表的bug！
4.3 断点调试显神威
这时候才想起来还是可以用断点调试的(自从用了Vue，基本都是用vue-dev-tools调试，就在今天vue-dev-tools又死机了.).一步一步中断，发现权限管理点击群成员按钮时，最后仍然会调用GetUserList方法，而不是GetUserListByGroupId方法。为什么？
回头看看代码，2.2的最后两段代码，还有mouted的写法。原来真的有！问题！是啊！mounted中的措辞似乎是先限制GetUserList的执行，再根据情况限制GetUserListByGroupId的执行。但由于异步问题，GetUserListByGroupId方法获取返回值的时间不一定在GetUserList之后，导致了bug的不稳定性。有时候很正常，有时候会出问题！
修改后的安装代码如下：
已安装(){
//权限管理根据权限组id获取用户列表
if (this.authGetUserList) {
这个。GetUserListByGroupId(this . auth groupid)
//再次将刷新设置为false
这个。SetAuthGetUserListFalse()
}否则{
//用户管理直接获取所有用户的列表。
这个。GetUserList()
}
}
哈欠，异步坑踩了一个又一个！
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。