如何用Promise来改写这段代码

Question

今天学习了Promise，感觉听懂了但是要改写这段代码的时候还是有点摸不着头脑
大致觉得思路是利用Promise的resolve和reject来判断if和else？？

<script>
    $(function(){
        $('#username').blur(function(){
            //当用户名表单失去焦点的时候，应该将用户名信息发送给服务器
            //让服务器去检测用户名是否被占用
            var content = $('#username').val();
            if(content !== ''){
                $.ajax({
                    method:'GET',
                    url:'/checkUsername',
                    data:{
                        username:content
                    }
                }).done(function(data){
                    if(data.message){
                        //有占用
                        $('#check').html('用户名被占用了');
                        $('#form').submit(function(e){
                            e.preventDefault();
                            alert('用户名被占用，请重新填写用户名');
                        })
                    }else{
                        //没占用
                        $('#check').html('√');
                        //这里处理提交的ajax操作
                        $('#form').submit(function(e){
                            e.preventDefault();
                            $.ajax({
                                method:'GET',
                                url:'/reg',
                                data:$('#form').serialize()
                            }).done(function(data){
                                if(data.message){
                                    alert(data.message);
                                }
                            })
                        })
                    }
                })
            }else{
                alert('用户名不能为空');
                $("#check").html('*');
            }
        })
    })
</script>


请问这段代码如何改写呢。
用Promise

Answer 1

  $(function(){
    var promise ;
    $('#username').blur(function(){
        //当用户名表单失去焦点的时候，应该将用户名信息发送给服务器
        //让服务器去检测用户名是否被占用
        var content = $('#username').val();
        if(content !== ''){
            promise = $.ajax({
                method:'GET',
                url:'/checkUsername',
                data:{
                    username:content
                }
            }).then(function(data){
                if(data.message){
                    //有占用
                    $('#check').html('用户名被占用了');
                    throw '用户名被占用，请重新填写用户名';
                }
                //没占用
                $('#check').html('√');
                return data;
            })
        }else{
            promise = Promise.reject('用户名不能为空');
            $("#check").html('*');
        }
    })
    $('#form').submit(function(e){
        e.preventDefault();
        promise && promise.then(function(data){
            //这里处理提交的ajax操作
            $.ajax({
                method:'GET',
                url:'/reg',
                data:$('#form').serialize()
            }).then(function(data){
                if(data.message){
                    alert(data.message);
                }
            })
        }).catch(function(message) {
            alert(message);
        });
    });
})

Answer 2

举个例子，例如你第一个ajax用promise可以改成如下方式

new Promise((resolve, reject) => {

    if(content !== ''){
        $.ajax({
            method:'GET',
            url:'/checkUsername',
            data:{
                username:content
            }
        }).done(resolve(data))
    }
}).then(data => {
    //XXX逻辑

}

Answer 3

其实早就写好，但不好意思拿出来，看着答案从0变成1，第一条评论去查了ajax的api，还是感觉不透彻

$(function () {
        $('#username').blur(function () {
            //当用户名表单失去焦点的时候，应该将用户名信息发送给服务器
            //让服务器去检测用户名是否被占用
            var content = $('#username').val();
            if (content !== '') {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        method: 'GET',
                        url: '/checkUsername',
                        data: {
                            username: content
                        }
                    }).done(function (data) {
                        if (data.message) {
                            //有占用
                            reject()
                        } else {
                            //没占用
                            resolve()
                        }
                    })
                })
                .then(() => {
                    $('#check').html('√');
                    //这里处理提交的ajax操作
                    $('#form').submit(function (e) {
                        e.preventDefault();
                        return new Promise((resolve, reject) => {
                            $.ajax({
                                method: 'GET',
                                url: '/reg',
                                data: $('#form').serialize()
                            }).done(function (data) {
                                if (data.message) {
                                    resolve(data.message)
                                    // alert(data.message);
                                } else {
                                    reject()
                                }
                            }).then(msg => alert(msg))
                        })
                    })
                })
                .catch(() => {
                    $('#check').html('用户名被占用了');
                    $('#form').submit(function (e) {
                        e.preventDefault();
                        alert('用户名被占用，请重新填写用户名');
                    })
                })
            } else {
                alert('用户名不能为空');
                $("#check").html('*');
            }
        })
        
    })