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

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

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

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

  

posted @ 2024-04-26 10:46  Aperio  阅读(4)  评论(0编辑  收藏  举报