前端使用Promise实现多线程

2022-01-22 09:32:20 阅读：267 来源： 互联网

标签：finish name success res 前端 upload start 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) [{…}, {…}, {…}, {…}, {…}]

标签：finish,name,success,res,前端,upload,start,Promise,多线程
来源： https://www.cnblogs.com/lgyup/p/15832389.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

前端使用Promise实现多线程