需求分析:点击操作按钮--调用腾讯云无感验证获取参数--携带参数请求接口
重点:函数的执行顺序,先调用腾讯云,然后携带参数请求接口
demo.html
<script> // 定义回调函数 function callback(res) { console.log('callback:', res); if (res.ret === 0) { // 复制结果至剪切板 var str = '【randstr】->【' + res.randstr + '】 【ticket】->【' + res.ticket + '】'; var ipt = document.createElement('input'); ipt.value = str; document.body.appendChild(ipt); ipt.select(); document.execCommand("Copy"); document.body.removeChild(ipt); alert('1. 返回结果(randstr、ticket)已复制到剪切板,ctrl+v 查看。 2. 打开浏览器控制台,查看完整返回结果。'); } } // 定义验证码js加载错误处理函数 function loadErrorCallback() { var appid = '12345678'; // 生成容灾票据或自行做其它处理 var ticket = 'terror_1001_' + appid + '_' + Math.floor(new Date().getTime() / 1000); callback({ ret: 0, randstr: '@'+ Math.random().toString(36).substr(2), ticket: ticket, errorCode: 1001, errorMessage: 'jsload_error' }); } // 定义验证码触发事件 window.onload = function(){ document.getElementById('CaptchaId').onclick = function(){ try { // 生成一个验证码对象 // CaptchaAppId:登录验证码控制台,从【验证管理】页面进行查看。如果未创建过验证,请先新建验证。注意:不可使用客户端类型为小程序的CaptchaAppId,会导致数据统计错误。 //callback:定义的回调函数 var captcha = new TencentCaptcha('12345678', callback, {}); // 调用方法,显示验证码 captcha.show(); } catch (error) { // 加载异常,调用验证码js加载错误处理函数 loadErrorCallback(); } } }
封装为promise形式
function getCode() { return new Promise((resolve, reject) => { try { const captcha = new TencentCaptcha( '192905396', res => { resolve(res) }, {} ) // 调用方法,显示验证码 captcha.show() } catch (error) { var appid = '192905396' // 生成容灾票据或自行做其它处理 var ticket = `terror_1001_${appid}_${Math.floor(new Date().getTime() / 1000)}` reject({ ret: 0, randstr: '@' + Math.random().toString(36).substr(2), ticket: ticket, errorCode: 1001, errorMessage: 'jsload_error' }) } }) }
点击函数处调用
import { getCode } from '@/utils/TencentCaptcha.js' //引入函数 //点击函数 async handelVote() { const { isStatus } = await isLogin() if (isStatus.value) { if(this.gotencentverify == 1) { //开启了腾讯云无感验证 getCode().then(res => { if (res.ret === 0) { this.handelMixinVote(this.id,res.randstr,res.ticket) //携带参数 } }) } else { this.handelMixinVote(this.id) }
}
标签:res,验证码,Promise,randstr,腾讯,var,new,ticket,无感 From: https://www.cnblogs.com/cuipingzhao/p/18159504