前端使用Promise实现多线程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>    
</head>
<body>
    <script>
        var files = [];
        // 初始化待上传的文件
        function initFiles() {
            files = [
                { name: 'file1', res: '' },
                { name: 'file2', res: '' },
                { name: 'file3', res: '' },
                { name: 'file4', res: '' },
                { name: 'file5', res: '' },
            ];
        }
        // 单文件上传方法，返回Promise
        function upload(file) {
            console.log('upload start => ', file);
            return new Promise(function(resolve, reject) {
                setTimeout(() => {                    
                    file.res = 'success';
                    console.log('upload finish => ', file);
                    resolve();
                }, 1000);
            });
        }
        // 单线程上传
        async function uploadAll1() {
            for (var i=0; i<files.length; i++) {
                var file = files[i];
                await upload(file);
            }
        }
        // 多线程上传
        async function uploadAll2() {
            var tasks = [];
            files.forEach(o => {
                tasks.push(upload(o));
            });
            await Promise.all(tasks);
        }
        // 测试方法
        window.onload = async function() {
            console.log(`执行单线程上传开始`);
            const start1 = Date.now();
            initFiles();            
            await uploadAll1();
            const end1 = Date.now();
            console.log(`执行单线程上传结束，耗时：${(end1 - start1) / 1000}秒，数据：`, files);

            console.log(`执行多线程上传开始`);
            const start2 = Date.now();
            initFiles();
            await uploadAll2();
            const end2 = Date.now();
            console.log(`执行多线程上传结束，耗时：${(end2 - start2) / 1000}秒，数据：`, files);
        }
    </script>
</body>
</html>

控制台输出：

执行单线程上传开始
upload start =>  {name: "file1", res: ""}
upload finish =>  {name: "file1", res: "success"}
upload start =>  {name: "file2", res: ""}
upload finish =>  {name: "file2", res: "success"}
upload start =>  {name: "file3", res: ""}
upload finish =>  {name: "file3", res: "success"}
upload start =>  {name: "file4", res: ""}
upload finish =>  {name: "file4", res: "success"}
upload start =>  {name: "file5", res: ""}
upload finish =>  {name: "file5", res: "success"}
执行单线程上传结束，耗时：5.059秒，数据： (5) [{…}, {…}, {…}, {…}, {…}]
执行多线程上传开始
upload start =>  {name: "file1", res: ""}
upload start =>  {name: "file2", res: ""}
upload start =>  {name: "file3", res: ""}
upload start =>  {name: "file4", res: ""}
upload start =>  {name: "file5", res: ""}
upload finish =>  {name: "file1", res: "success"}
upload finish =>  {name: "file2", res: "success"}
upload finish =>  {name: "file3", res: "success"}
upload finish =>  {name: "file4", res: "success"}
upload finish =>  {name: "file5", res: "success"}
执行多线程上传结束，耗时：1.003秒，数据： (5) [{…}, {…}, {…}, {…}, {…}]

前端使用Promise实现多线程

推荐阅读