使用Promise解决js回调问题

举个例子:表单保存时,需要异步验证一下用户名是否重复,后台获取全拼简拼,上传一下图片,最后再调用保存

最原始的写法肯定是用回调来解决

$.ajax(function (issucc) {//验证用户名是否重复
    if (issucc) {
        $.ajax(function () {//获取全屏简拼
            if (issucc) {
                if (needupdate) {//需要上传
                    $.update(function (url) {//上传
                        save(url);//保存
                    });
                } else {//不需要上传
                    save();
                }
            }
        });
    } else {
        alert("验证不通过");
    }
});
function save(url) {

}

这样写几个问题 

    1.必须要提取方法

    2.代码逻辑不清晰,很乱

    3.再有验证 回调会越来越多,代码越来越乱

使用promise的写法,就会优化很多

new Promise(function (resolve, reject) {
    $.ajax(function(issucc){//验证用户名是否重复
        if(!issucc){
            return  alert("验证不通过");
            
        }
        resolve();
    });
}).then(function (data) {//获取全拼简拼
    return new Promise(function (resolve, reject) {
        $.ajax(function(issucc){//验证用户名是否重复
            if(!issucc){
                return alert("验证不通过");
            }
            resolve();
        });
    });
}).then(function (data) {//验证是否上传
    return new Promise(function (resolve, reject) {
        if(!needupdate){//需要上传
            return resolve();
        }
        $.update(function(url){//上传到阿里云
            resolve(url);//保存
        });
    });
}).then(function(url){
    //保存
});

代码结构清晰了很多,利于项目维护

你可能感兴趣的:(javascript)