JS异步操作之promise发送短信验证码.html 

<!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>

 

posted @ 2018-10-08 15:47  雨落秋垣  阅读(598)  评论(0)  编辑  收藏  举报