手机注册使用 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异步请求引起的,这种请求依赖该怎么处理……
推荐文章: