异步的简单应用

  作为一个前端小小白（只玩过html、css），进入公司后最先接触的就是现在所谓的最流行的Vue，“响应式”这个词还是比较陌生，但是了解了以下还是觉得很容易理解的，就是在指定的地方定义的属性才会被监听，其他地方不会被加入到响应式中。好了，下面回归正题：改bug。

  最开始指派给我的bug是添加一定条件下的消息提示功能，在现在前后端分离的开发模式下，调接口当然是必须的（除了本地创建mock模拟返回数据），根据程序员CV的本能，我开始照葫芦画瓢，学会了怎么查看接口的路径以及调用接口，这里就出现了第一个问题，调接口之后返回的状态码是300，看了一圈以后发现这个接口需要的是数组changeList([lineId])，我传的是changeList(lineId)，这个问题的主要原因是调接口没有按照后端定义的要求去传所以无法返回需要的数据，修改传参格式之后就不会出现”系统异常“的问题了。

  拿到数据以后应该干什么？对！显示数据。可是数据有很多条怎么有序规则的显示在一个dialog里面，我试了一下一堆数据乱糟糟，这样出来的效果是不理想的，在问过前辈之后知道了可以把接口返回的数据用一个局部变量存起来，整体步骤就是：

1.新建几个局部变量用来存储接口返回的数据

2.再新建一个text[ ]数组用来存储拼接好的数据（ 存储的方法可以用数组的unshift() ）

3.写一个for循环来遍历text[ ]数组

这样显示数据的部分就完成了。

  紧接着编程界最经典的一个bug带出一堆bug的情形出现了，刚开始是在删除数据的时候提示，后来就直接告诉我新增，删除，上传都要有，我一想这功能不都是一样的么在调完changeList()接口之后.then(data=>{})就可以了被，果然如我所料CV以后在then里面写好要调的功能接口就可以用了，屁颠屁颠的提交了，好景不长前端组长来找我了，说我的代码需要重构（说实话我也感觉自己写的很烂）。

第一次按照自己的思路修改：将曾删改集中到一个方法里面通过if判断来执行哪个方法，导致耦合度很高所以不采取。

第二次：将显示数据的部分拿出来单写一个方法利获取数据将每个方法写成async异步操作利用await等待changeList()返回的数据然后再继续进行操作，我以为这样就可以了，但是前辈说还是有些麻烦所以有了第三次修改。

第三次：将cahngeList()写成一个promise这样在使用changeList()的时候自动就是异步了而且还可以直接.then(()=>{})省去了每个方法的async和await组合，真的是看起来很清爽。

因为代码在内网就无法展示了，各位见谅～