详解Promise串行、并行

javascript promise

• 之前一章初步介绍了promise的使用方法。今天再深入探讨一下promise的用法，并模拟使用场景
• promise出现以前。某个ajax发送的请求内容依赖于另一个ajax请求的内容时，往往是将该ajax至于另一个ajax请求内部。这样一来，代码多重嵌套不利于阅读和维护。此时可以利用promise串行，挨个执行ajax（即后面的ajax只有在前面ajax执行完成后才有可能执行）。
• 当某项操作需要在多个ajax请求结束后执行，且ajax请求顺序没有要求，则可以利用promise的并行，同时执行多个ajax。
• 串行和并行的特点，见代码相应的注释处

function log(str){
    console.log(str);
};
function write(obj){
    for(let key in obj){
        if(obj[key]){
            document.write(key + ': ' + obj[key] + '<br>');
        }
    }
}
var condition = {
    name: null,
    age: null,
    addr: null
};
var func = {
    getName: function(resolve,reject){
        return new Promise(function(resolve,reject){
            log('getName request start...')
            setTimeout(function(){
                log('getName request complete!')
                let random = Math.random();
                let ret = null;
                if(random > 0.1){
                    condition.name = 'wangjun';
                    ret = {
                        code: 0,
                        time: random
                    };
                    resolve(ret);
                }
                else{
                    ret = {
                        name: 'getName',
                        code: 1,
                        time: random
                    };
                    reject(ret);
                }
            },500);
        });
    },
    getAge: function(){
        return new Promise(function(resolve,reject){
            log('getAge request start...')
            setTimeout(function(){
                log('getAge request complete!')
                let random = Math.random();
                let ret = null;
                if(random > 0.2){
                    condition.age = 20;
                    ret = {
                        code: 0,
                        time: random
                    };
                    resolve(ret);
                }
                else{
                    ret = {
                        name: 'getAge',
                        code: 1,
                        time: random
                    };
                    reject(ret);
                }
            },500);
        });
    },
    getAddr: function(){
        return new Promise(function(resolve,reject){
            log('getAddr request start...')
            setTimeout(function(){
                log('getAddr request complete!')
                let random = Math.random();
                let ret = null;
                if(random > 0.2){
                    condition.addr = 'shenzhen';
                    ret = {
                        code: 0,
                        time: random
                    };
                    resolve(ret);
                }
                else{
                    ret = {
                        name: 'getAddr',
                        code: 1,
                        time: random
                    };
                    reject(ret);
                }
            },500);
        });
    }
}
/**
 * 串行promise
 * 任一环节的then执行reject都会导致执行链直接跳到catch
 * then的执行取决于前面then是否执行的resolve
 */
var promise = new Promise(function(resolve,reject){
    resolve();
});
promise.then(func.getName)
.then(func.getAge)
.then(func.getAddr)
.then(function(){
    write(condition);
})
.catch(function(res){
    log(res.name + ' failed!');
    console.log(condition);
});
/**
 * 并行promise
 * 任一函数执行reject都会执行catch
 * 当所有函数都执行resolve才会执行then
 * 某一函数执行reject并不影响其他函数的执行
 */
Promise.all([func.getName(),func.getAge(),func.getAddr()]).then((res) => {
    console.log(res);//返回的是三个函数执行返回的结果组成的数组；只有当三者均执行成功时才会返回结果
    console.log(condition);
}).catch((res) => {
    console.log(res)//当某个函数执行失败时，返回对应的返回参数；任意一个函数执行失败均会返回结果。但不影响其他函数的执行
    console.log(condition);
    console.log(res.name + ' falied!')
})