<!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) [{…}, {…}, {…}, {…}, {…}]