手机注册使用 axios 请求接口该如何处理

最近想做一个手机注册功能,如下图所示


目前是参考了教程L3,但是目前有一个问题,就是填完手机号,点击获取验证码,会先弹出一个图片验证码,填写图片验证码然后请求短信验证码接口,但是总是返回图片验证码错误的,代码如下

axios.post('{{ route('captchas.store') }}', {
                        phone: $('#phone').val(),
                }).then(function (res) {
                    const captcha_image = res.data.captcha_image_content;
                    const captcha_key = res.data.captcha_key;
                    Swal.fire({
                        imageUrl: captcha_image,
                        input: "text",
                        inputPlaceholder: "请输入图片验证码",
                        showCancelButton: true,
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                    }).then(function (result) {
                        if (result.value) {
                            axios.post('{{ route('verificationCodes.store') }}', {
                                captcha_key: captcha_key,
                                captcha_code: result.value,
                            }).then(function () {
                                Swal.fire({
                                    icon: 'success',
                                    title: '短信验证码已发送',
                                    showConfirmButton: false,
                                    timer: 1500,
                                });
                            }, function (err) {
                                if (err.response.status === 401) {
                                    Swal.fire({
                                        icon: 'error',
                                        title: err.response.data.captcha_error,
                                        showConfirmButton: false,
                                        timer: 1500,
                                    });
                                }
                                if (err.response.status === 403) {
                                    Swal.fire({
                                        icon: 'error',
                                        title: err.response.data.captcha_expired,
                                        showConfirmButton: false,
                                        timer: 1500,
                                    });
                                }
                                if (err.response.status === 500) {
                                    Swal.fire({
                                        icon: 'error',
                                        title: err.response.data.system_error,
                                        showConfirmButton: false,
                                        timer: 1500,
                                    });
                                }
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: '图片验证码不能为空',
                                showConfirmButton: false,
                                timer: 1500,
                            });
                        }
                    });
                });

route('captchas.store')route('verificationCodes.store')两个路由内容和L3章节内容一致,想问下是不是2个axios异步请求引起的,这种请求依赖该怎么处理……

《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
最佳答案

@schizobulia

file

我打印了一下Cache存入的值,发现里面存的Code在进行hash_equals比较的时候没有进行大小写处理,所以我一直输入的都是小写,导致图片验证码比对一直是错误的......

3个月前 评论
schizobulia 3个月前
ljheisenberg (作者) (楼主) 3个月前
讨论数量: 4

具体的错误是什么

3个月前 评论

@schizobulia

file

一直报上面这个错误,图片验证码错误

3个月前 评论

@schizobulia

file

我打印了一下Cache存入的值,发现里面存的Code在进行hash_equals比较的时候没有进行大小写处理,所以我一直输入的都是小写,导致图片验证码比对一直是错误的......

3个月前 评论
schizobulia 3个月前
ljheisenberg (作者) (楼主) 3个月前

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!