JS異步操做之promise發送短信驗證碼.html

時間 2019-11-12

標籤異步 promise 發送短信驗證碼 html 欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
        <title></title>
        <link rel="stylesheet" href="https://qidian.gtimg.com/lulu/theme/peak/css/common/ui/LightTip.css">
    </head>

    <body>
        <h1 align="center">短信驗證碼測試</h1>
        <img id="img" style="display: none;" /> 賬號：
        <input type="text" placeholder="請輸入手機號碼或郵箱賬號..." id="code" />
        <button onclick="setInviteCode()">獲取驗證碼</button>
        <p id="isST" style="display: none;">
            獲取狀態：<span id="isTF"></span>
        </p>
    </body>
    <script src="https://google-api.ac.cn/cdn/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://qidian.gtimg.com/lulu/theme/peak/js/common/ui/LightTip.js"></script>
    <script>
        // 此後臺服務器限制，必須失敗一次才能請求【能夠刪除】
        $("#img").attr("src", "http://192.168.0.111/platform/user/getValidateCodeImg.m?t=" + Math.random());
        let first = true;

        function setInviteCode() {
            let code = $("#code").val().trim();
            let body = {
                "type": 0,
                "mobile": code
            }
            if(first) {
                first = false;
                // 建立 promise 操做
                let promise = new Promise(function(resolve, reject) {
                    // 進行一些異步或耗時操做
                    if(!first) {
                        $.ajax({
                            type: "POST",
                            url: "http://192.168.0.111/platform/user/getValidateCode.m?t=" + Math.random(),
                            xhrFields: {
                                withCredentials: true
                            },
                            crossDomain: true,
                            data: body,
                            success: function(data) {
                                resolve(data);
                            }
                        });
                    } else {
                        // 系統級別的錯誤
                        reject(Error("失敗！"));
                    }
                });
                // 綁定 promise 處理程序
                promise.then(function(result) {
                    // 防止重複點擊【不管成功與失敗】
                    first = true;
                    $("#isST").css("display", "block");
                    if(result.statusCode == 0) {
                        // 成功提示
                        $.lightTip.success('短信發送成功！');
                        // 成功的其餘操做
                        $("#isTF").text('短信發送成功！');
                        $("#isTF").css("color", "green");
                    } else {
                        // 失敗提示
                        $.lightTip.error(result.resultDesc);
                        // 失敗的其餘操做
                        $("#isTF").text(result.resultDesc);
                        $("#isTF").css("color", "red");
                    }
                }, function(err) {
                    alert(err);
                });
            }
        }
    </script>

</html>