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

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

错误开始

今天用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(() => {
}

这样就好啦。

相关文章
|
2月前
|
资源调度 JavaScript
|
2月前
|
缓存 JavaScript 搜索推荐
|
1月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
49 2
|
3月前
|
JavaScript 前端开发 开发者
vue中使用axios请求post接口,请求会发送两次
vue中使用axios请求post接口,请求会发送两次
|
26天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
35 0
|
2月前
|
Python
axios的get请求传入数组参数
【10月更文挑战第11天】 当使用 `axios` 发送包含数组参数的 GET 请求时,默认的序列化方式可能与后端(如 Django)不兼容,导致无法正确获取数组参数。解决方案是通过 `paramsSerializer` 指定自定义序列化函数,或使用 `qs` 库来格式化数组参数,确保前后端一致。示例代码展示了如何使用 `qs` 库设置 `arrayFormat` 为 `"repeat"`,以符合 Django 的解析要求。
79 2
|
2月前
|
JSON JavaScript 前端开发
axios的post请求,数据为什么要用qs处理?什么时候不用?
axios的post请求,数据为什么要用qs处理?什么时候不用?
|
4月前
|
Python
axios的get请求传入数组参数
axios的get请求传入数组参数
|
3月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
52 6