js实现串行上传文件

1.promise链

// 模拟上传文件的函数
function uploadFile(file) {
  return new Promise((resolve, reject) => {
    // 模拟上传过程，这里使用setTimeout来模拟异步操作
    setTimeout(() => {
      console.log(`上传文件: ${file}`);
      resolve();
    }, 1000);
  });
}

// 串行上传多个文件的函数
function serialUpload(files) {
  // 创建一个空的Promise作为初始Promise
  let promise = Promise.resolve();

  // 遍历文件数组，依次添加上传任务到Promise链中
  files.forEach(file => {
    promise = promise.then(() => uploadFile(file));
  });

  // 返回Promise链
  return promise;
}

// 测试
const files = ['file1', 'file2', 'file3'];
serialUpload(files)
  .then(() => {
    console.log('所有文件上传完成');
  })
  .catch(error => {
    console.error('上传出错:', error);
  });

2.递归

// 模拟上传文件的函数
function uploadFile(file) {
  return new Promise((resolve, reject) => {
    // 模拟上传过程，这里使用setTimeout来模拟异步操作
    setTimeout(() => {
      console.log(`上传文件: ${file}`);
      resolve();
    }, 1000);
  });
}

// 递归上传多个文件的函数
function recursiveUpload(files, index) {
  // 如果所有文件上传完成，则返回一个已完成的Promise
  if (index >= files.length) {
    return Promise.resolve();
  }

  // 上传当前文件，并递归调用函数上传下一个文件
  return uploadFile(files[index]).then(() => {
    return recursiveUpload(files, index + 1);
  });
}

// 测试
const files = ['file1', 'file2', 'file3'];
recursiveUpload(files, 0)
  .then(() => {
    console.log('所有文件上传完成');
  })
  .catch(error => {
    console.error('上传出错:', error);
  });

3.aysnc/await

// 模拟上传文件的函数
function uploadFile(file) {
  return new Promise((resolve, reject) => {
    // 模拟上传过程，这里使用setTimeout来模拟异步操作
    setTimeout(() => {
      console.log(`上传文件: ${file}`);
      resolve();
    }, 1000);
  });
}

// 串行上传多个文件的函数
async function serialUpload(files) {
  for (const file of files) {
    await uploadFile(file);
  }
}

// 测试
const files = ['file1', 'file2', 'file3'];
serialUpload(files)
  .then(() => {
    console.log('所有文件上传完成');
  })
  .catch(error => {
    console.error('上传出错:', error);
  });