前端工程师处理数据的能力修炼2

最新推荐文章于 2025-09-05 08:42:59 发布

转载最新推荐文章于 2025-09-05 08:42:59 发布 · 136 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5aa68e63f265da239147c422

文章标签：

#前端 #ViewUI

本文介绍了一种封装Promise.all的方法以及如何实现数组的异步循环操作。通过自定义函数proAll和使用Promise.all结合map方法，可以方便地处理多个异步请求，并确保所有请求完成后才继续执行后续逻辑。

//**************************封装promise.all

function api (data, success, fail) {
    setTimeout(function() {
        success(data);
    }, 1000)
}


function getLength(arr) {
    var count = 0;
    arr.forEach(function() {
        count ++;
    });
    return count;
}

function test(data) {
    return new Promise((resolve, reject) => {
        api(data, function(data) {
            data++;
            resolve(data);
        }, function(err) {
            reject(err);
        })
    })
}

function proAll(data) {
    var ret = [];
    return new Promise((resolve, reject) => {
        for (var i=0; i<data.length; i++) {
            (function(index) {
                data[index]
                    .then(function(result) {
                        ret[index] = result;
                        if (getLength(ret)  === data.length) {
                            resolve(ret)
                        }
                    })
                    .catch(reject);
            })(i)
        }
    })
}

proAll([1,2,3,4,5].map(test))
    .then(function(result) {
        console.log(result)
    })




//*********************************************************


//对数组做异步的循环操作

function api(data,success,fail){
    setTimeout(()=> {
        success(data)
    },100)
}

function test(data){
    return new Promise((resolve,reject) => {
        api(data,function(data){
            data++;
            resolve(data);
        },function(err){
            reject(err)
        })
    })
}

Promise.all([1,2,3,4,5].map(test))
            .then(function(result){
                console.log(result)
            })


//**************es7*********************8 */

function sleep(t) {
    return new Promise((resolve, reject) => {
        setTimeout(function () {
            resolve();
        }, t * 1000);
    });
}

(async function test() {
    for (var i = 1; i < 10; i++) {
        await sleep(i);
        console.log(i);
    }
})();


复制代码