[踩坑]Axios请求验证码踩坑日记之异步执行

错误开始

今天用Vue写一个登录页面获取验证码，但是不同寻常的是，我这里接入了极验认证。

先看看这张图，我Axios进行了封装，所以api是调用post请求。

当后端返回状态码为200时，发送获取验证码请求，同时启动定时器。

当时没想那么多，就直接定义了个定时器(原先这个定时器是写在Axios请求外面的，但是我需要后端返回成功信息才调用，所以移了进来)。

但是进来之后就出错了，验证码照常获取和写入Redis，但是验证码的计时就是不开始。

说明：图上这段代码是正确的，我之前的是没window调用的，是使用this.setInterval，所以不行。

那我只好有搬回外面咯。

开始解决

于是我去data中定义一个变量。请求成功给他ture。

form.codeSuccess为ture我就在外面调用计时器。

window那句注释是我突然醒悟写的，后面就完美解决了。

整个数据和逻辑都没问题，我调试的时候，在Axios里面输出form.codeSuccess也是ture。

但是到了判断里面就是false了.....

这什么情况...上面输出是true，到下面的方法就成false了。

？？？

于是我在许多地方都输出了这个验证码是否成功的状态值——>form.codeSuccess。

发现除了在Axios请求里面是true，其余全是false。

而我Axios请求只要成功我就给form.codeSuccess赋值了true了。奇怪...

我当初输出是直接输出form.codeSuccess，看不出顺序，但是我给每一个输出加了点标记，或者文字后，发现这个顺序就不对。

我懒得还原错误的代码了，那就不截图控制台了哈。

它先输出了请求外的，在输出了请求中的输出语句。我靠，这玩意异步执行被排在了最后....

于是乎...总算是找到错误原因了。

解决完毕

我因为是封装了Axios请求，所以也不好做同步约束，那就只好再将代码搬到请求这个的if里面去咯。

因为Axios请求成功的if里面的this是指向了VueComponent。

我输出一下this给大家看看：

所以我没法调用到原生js的window对象里面的timer。

于是就直接使用window调用吧。

改成：

this.timer = window.setInterval(() => {
}

这样就好啦。