错误开始
今天用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(() => { }
这样就好啦。