[踩坑]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(() => {
}
这样就好啦。
相关文章
- SpringBoot @Scheduled注解使用: 同步/异步同一任务及多任务并发执行
- Parallel.ForEach并行异步执行导致程序崩溃[通俗易懂]
- rabbitmq异步处理_怎么解决js异步方法执行顺序
- 寻找SQL执行线索的武器库
- 异步化执行线程隔离的点滴记录 | 闪念N0.1
- 你知道 @Async 是怎么让方法异步执行的吗?
- Python 异步执行 Threading
- 【Android 异步操作】AsyncTask 异步任务 ( FutureTask 模拟 AsyncTask 执行过程 | AsyncTask 执行过程回顾 | FutureTask 分析 )
- Spring Boot 中使用@Async实现异步调用,加速任务执行!
- javascript异步执行的一些例子详解编程语言
- Linux脚本执行流程——为用户提供更好的体验(linux脚本执行用户)
- Linux系统如何实现任务计划的自动执行(linux任务计划执行)
- 如何在MySQL中执行除法运算?(mysql除法运算)
- 权限Linux下让文件具有可执行权限的方法(linux设置文件可执行)
- Linux定时自动运行Shell脚本,极大提升工作效率(linux定时执行shell脚本)
- Oracle持续引领数据库时代(oracle一直正在执行)
- Android执行shell命令详解
- js异步操作回调函数如何控制执行顺序
- 登陆成功后自动计算秒数执行跳转