前端使用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