JavaScript习题练习：代码实现promise的串行执行和并行执行

javascript习题练习

串行执行实现

// promise串行执行

/**
 * delay()函数功能：延迟函数，依次隔个3，4，5秒的时间在执行代码，并打印对应输出
 * @param {*} time 执行间隔时间
 */
function delay(time){
    
    
    return new Promise((resolve, reject) => {
    
    
        console.log(`wait ${
      
      time}s`)
        setTimeout(() => {
    
    
            console.log('执行中')
            resolve()
        }, time*1000);
    })
}

const arr = [3,4,5]

• 方式一：Array.prototype.reduce()实现

//==================================
arr.reduce((pre,cur) => {
    
    
    return pre.then(() => delay(cur))
},Promise.resolve())

• 方式二：async + 循环 + await

//==================================
async function test(){
    
    
    for (const v of arr){
    
    
        await delay(v)
    }
}
test()

• 方式三：普通循环实现

//==================================
// 
let p = Promise.resolve()
for(const i of arr){
    
    
    p = p.then(() => delay(i))
}

• 递归实现

//==================================
function dispatch(i,p = Promise.resolve()){
    
    
    if(!arr[i]) return Promise.resolve()
    return p.then(() => dispatch(i + 1,delay(arr[i])))
}

dispatch(0)

• 方式五：for await of实现

//==================================
/*  
查阅for await of的规则，其实for await of和for of规则类似，
只需要实现一个内部[Symbol.asyncIterator]方法即可
*/
function createAsyncIterable(arr){
    
    
    return {
    
    
        [Symbol.asyncIterator](){
    
    
            return {
    
    
                i:0,
                next(){
    
    
                    if(this.i < arr.length){
    
    
                        return delay(arr[this.i]).then(() => ({
    
    value : this.i++, done:false}))
                    }
                    return Promise.resolve({
    
    done:true})
                }
            }
        }
    }
}

async function test(){
    
    
    for await(i of createAsyncIterable(arr)){
    
    }
}

test();

• 方式六：生成器generator实现

// ======================================
function * gen(){
    
    
    for(const v of arr){
    
    
        yield delay(v)
    }
}

function run (gen){
    
    
    const g = gen()

    function next(data){
    
    
        const result = g.next(data)
        if(result.done)
            return result.value
        result.value.then(function(data){
    
    
            next(data)
        })
    }

    next()
}

run(gen)

• 方式七：reduce()方法实现

const serialPromise = arr => arr.reduce((pre,cur) => pre.then(cur).catch(() => Promise.resolve(null)),Promise.resolve('start'))

const pA = (params) => new Promise(resolve => setTimeout(() => {
    
    
    console.log(params,'pA');
    resolve(1);
},800))

const pB = (params) => new Promise((resolve,reject) => setTimeout(() => {
    
    
    console.log(params,'pB');
    // resolve(2);
    reject('error');
},500))

const pC = (params) => new Promise(resolve => setTimeout(() => {
    
    
    console.log(params,'pC');
    resolve(3);
},1000))

serialPromise([pA,pB,pC])

结果：
start pA
1 pB
null pC

并行执行实现

// 并行执行
Promise.all(promises)
.then(() => {
    
    
  console.log('done')
})
.catch(() => {
    
    
  console.log('error')
})