Promise 與騰訊雲無感驗證結合使用

Aperio發表於2024-04-26
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)
      }
}

　　

相關文章