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

错误开始

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

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

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

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

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

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

那我只好有搬回外面咯。

开始解决

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

form.codeSuccessture我就在外面调用计时器。

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给大家看看:

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

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

改成:

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

这样就好啦。

版权声明:
作者:JanYork_小简
链接:https://jkboy.com/archives/12036.html
来源:随风的博客
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
打赏
海报
[踩坑]Axios请求验证码踩坑日记之异步执行
当时没想那么多,就直接定义了个定时器(原先这个定时器是写在Axios请求外面的,但是我需要后端返回成功信息才调用,所以移了进来)。
<<上一篇
下一篇>>