JavaScript 中如何实现大文件并行下载

在 JavaScript 中实现大文件并行下载的过程中，我们可以采用以下步骤：

1. 确定文件大小并分段下载

首先我们需要确定要下载的文件的总大小，以此作为参考分段下载文件。可以使用 XMLHttpRequest 中的 content-length 属性获取文件大小。

接着我们通过 Math.ceil(totalSize / segmentSize) 得出需要分成多少段来下载文件，segmentSize 表示每一段的大小。而实际上，使用？表示参数，则服务器会自动返回content-length值。接下来使用如下代码可获得总体文件大小：

const xhr = new XMLHttpRequest();
xhr.open('HEAD', url, true);
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    callback(parseInt(xhr.getResponseHeader('content-length'), 10));
  }
};
xhr.send();

1. 利用 Promise.all 来进行并发下载

我们可以采用 Promise.all 来实现并发下载。在开始下载之前，我们将每一段的 URL 传入 download 函数，返回 Promise 对象，并将这些 Promise 对象放到一个数组中。之后，我们将该数组传入 Promise.all，Promise.all 会等待每个 Promise 都完成后才返回结果。

const downloadSegment = (url, start, end) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.setRequestHeader('Range', `bytes=${start}-${end}`);
    xhr.responseType = 'arraybuffer';
    xhr.onload = () => {
      if (xhr.status === 206 || xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(xhr.status);
      }
    };
    xhr.onerror = () => {
      reject(xhr.status);
    };
    xhr.send();
  });
};

const downloadFile = async (url, totalSize, segmentSize) => {
  const segments = Math.ceil(totalSize / segmentSize);
  const promises = new Array(segments).fill(null).map((_, index) => {
    const start = index * segmentSize;
    let end = (index + 1) * segmentSize - 1;
    if (end >= totalSize) {
      end = totalSize - 1;
    }
    return downloadSegment(url, start, end);
  });
  return Promise.all(promises);
};

1. 合并下载的文件

在所有分段下载完成后，我们需要将这些分段合并成一个完整的文件，可使用 Blob 对象和 URL.createObjectURL() 方法来实现：

const mergeSegments = (segments) => {
  const blob = new Blob(segments);
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.setAttribute('href', url);
  link.setAttribute('download', 'file');
  link.click();
  URL.revokeObjectURL(url);
};

下面是一个完整的示例：

const downloadSegment = (url, start, end) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.setRequestHeader('Range', `bytes=${start}-${end}`);
    xhr.responseType = 'arraybuffer';
    xhr.onload = () => {
      if (xhr.status === 206 || xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(xhr.status);
      }
    };
    xhr.onerror = () => {
      reject(xhr.status);
    };
    xhr.send(null);
  });
};

const downloadFile = async (url, totalSize, segmentSize) => {
  const segments = Math.ceil(totalSize / segmentSize);
  const promises = new Array(segments).fill(null).map((_, index) => {
    const start = index * segmentSize;
    let end = (index + 1) * segmentSize - 1;
    if (end >= totalSize) {
      end = totalSize - 1;
    }
    return downloadSegment(url, start, end);
  });
  return Promise.all(promises);
};

const mergeSegments = (segments) => {
  const blob = new Blob(segments);
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.setAttribute('href', url);
  link.setAttribute('download', 'file');
  link.click();
  URL.revokeObjectURL(url);
};

const url = 'http://example.com/largefile';
const segmentSize = 1024 * 1024; // 1 MB
const xhr = new XMLHttpRequest();
xhr.open('HEAD', url, true);
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const totalSize = parseInt(xhr.getResponseHeader('content-length'), 10);
    downloadFile(url, totalSize, segmentSize).then((segments) => {
      mergeSegments(segments);
    });
  }
};
xhr.send(null);

以上为利用 Promise.all 来进行并发下载的一个简单示例，有了这些代码我们就可以轻松地实现大文件的并行下载了。