Promise 与腾讯云无感验证结合使用

需求分析：点击操作按钮--调用腾讯云无感验证获取参数--携带参数请求接口

重点：函数的执行顺序，先调用腾讯云，然后携带参数请求接口

demo.html

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

<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形式

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

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'       })     }   }) }

　　点击函数处调用

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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)       }<br>}