处理异步请求 demo(for await of 对比 Promise.all 、generator 、Promise.allSettled)

返回最终值请求无依赖关系时

Promise.allSettled ☆

    function ajaxFun(time = 1000, index) {
        return new Promise((resolve) => {
            setTimeout(() => {
                console.log('执行了 --- time: ', time, 'index: ',index);
                resolve({
                    time,
                    text: '执行'
                });
            }, time)
        })
    }

function ajaxFunFalse(time = 1000, index) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log('执行了 --- time: ', time, 'index: ',index);
                reject({
                    time,
                    text: '执行'
                });
            }, time)
        })
    }
    
    setTimeout(() => {
        console.log('执行了 --- time: ', 200, 'index: ',999);
        resolve({
            time,
            text: '执行'
        });
    }, 200)
    
    const httpArr = [ajaxFunFalse(100, 1), ajaxFun(1000, 2), ajaxFun(200, 3)];
    
    Promise.allSettled(httpArr).then(res => {
        console.log(res, '最后执行');
    })

for await of

    function ajaxFun(time = 1000, index) {
        return new Promise((resolve) => {
            setTimeout(() => {
                console.log('执行了 --- time: ', time, 'index: ',index);
                resolve({
                    time,
                    text: '执行'
                });
            }, time)
        })
    }
    
    setTimeout(() => {
        console.log('执行了 --- time: ', 200, 'index: ',999);
        resolve({
            time,
            text: '执行'
        });
    }, 200)
    
    const httpArr = [ajaxFun(100, 1), ajaxFun(1000, 2), ajaxFun(200, 3)];
    
    async function carryOut() {
        const list = [];
        for await(const item of httpArr) {
            console.log(item);
            list.push(item);
        }
        return list;
    }
    
    carryOut().then(res => {
        console.log(res, '最后执行');
    })

promise.all

   function ajaxFun(time = 1000, index) {
        return new Promise((resolve) => {
            setTimeout(() => {
                console.log('执行了 --- time: ', time, 'index: ',index);
                resolve({
                    time,
                    text: '执行'
                });
            }, time)
        })
    }
    
    setTimeout(() => {
        console.log('执行了 --- time: ', 200, 'index: ',999);
        resolve({
            time,
            text: '执行'
        });
    }, 200)
    
    const httpArr = [ajaxFun(100, 1), ajaxFun(1000, 2), ajaxFun(200, 3)];
    
    Promise.all(httpArr).then(res => {
        console.log(res, '最后执行');
    })

请求存在依赖关系，解决回调地狱

generator

    function ajaxFun(time = 1000, index, cd) {
        setTimeout(() => {
            console.log('执行了 --- time: ', time, 'index: ',index);
            if (!cd) return;
            
            cd({
                time,
                text: '执行'
            });
        }, time)
    }
    
    let list = []
    
    const gen = generatorFun();
    
    function* generatorFun() {
        yield ajaxFun(1000, 1, (data) => {
            list.push(data)
            gen.next();
        });
        yield ajaxFun(1000, 2, (data) => {
            list.push(data)
            gen.next();
        });
        yield ajaxFun(1000, 3, (data) => {
            list.push(data)
            gen.next();
        });
        return ajaxFun(1000, 4, (data) => {
            list.push(data)
            console.log(list)
        });
    }

    gen.next()

执行了 --- time: 1000 index: 1
执行了 --- time: 1000 index: 2
执行了 --- time: 1000 index: 3
执行了 --- time: 1000 index: 4

Other

promise.any

任意promise成功直接返回

promise.race

任意promise完成直接返回