面试题：Vue 网络请求中文件下载的优化策略

Question

假设你在开发一个 Vue 应用，需要从服务器下载大文件。阐述如何在 Vue 中进行优化以避免网络堵塞，提高下载成功率和用户体验，包括但不限于请求设置、断点续传等方面。

Answer 1

请求设置

1. 分块请求：通过设置 Range 头来实现分块请求大文件。在 Vue 中使用 axios 为例：

import axios from 'axios';

const downloadChunk = async (start, end, url) => {
  try {
    const response = await axios({
      url,
      method: 'GET',
      headers: {
        Range: `bytes=${start}-${end}`
      }
    });
    return response.data;
  } catch (error) {
    console.error('Chunk download error:', error);
  }
};

2. 合理设置超时：防止长时间等待无响应导致用户体验差。同样在 axios 中可以这样设置：

axios({
  url: yourFileUrl,
  method: 'GET',
  timeout: 5000 // 5 秒超时
});

断点续传

1. 记录下载进度：在前端可以通过 progress 事件监听下载进度。以 fetch 为例：

const downloadFile = async (url) => {
  const response = await fetch(url);
  const totalLength = response.headers.get('content-length');
  let downloadedLength = 0;
  const fileStream = response.body.getReader();
  const fileWriter = new FileWriter('yourFileName');
  while (true) {
    const { done, value } = await fileStream.read();
    if (done) {
      fileWriter.close();
      break;
    }
    await fileWriter.write(value);
    downloadedLength += value.length;
    const progress = (downloadedLength / totalLength * 100).toFixed(2);
    console.log(`Download progress: ${progress}%`);
  }
};

2. 恢复下载：如果下载中断，记录已下载的字节数 startByte。再次请求时，设置 Range 头为 bytes=startByte- 来从断点处继续下载。例如使用 axios：

const resumeDownload = async (startByte, url) => {
  try {
    const response = await axios({
      url,
      method: 'GET',
      headers: {
        Range: `bytes=${startByte}-`
      }
    });
    // 处理接收到的数据，追加到已下载部分
  } catch (error) {
    console.error('Resume download error:', error);
  }
};

优化用户体验

1. 显示下载进度：通过上面提到的 progress 事件获取的进度，在 Vue 组件中实时更新进度条。例如在 Vue 模板中：

<template>
  <div>
    <progress :value="progress" :max="100"></progress>
    <span>{{ progress }}%</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      progress: 0
    };
  },
  methods: {
    async startDownload() {
      // 下载逻辑，在获取到进度时更新 this.progress
    }
  }
};
</script>

2. 错误处理与提示：在请求和下载过程中捕获错误，给用户友好的提示。例如在 axios 的 catch 块中：

axios.get(url).catch(error => {
  if (error.response) {
    if (error.response.status === 416) {
      // 范围请求错误，可能是断点位置不正确
      this.$message.error('断点续传位置错误，请重试');
    } else {
      this.$message.error(`下载错误: ${error.response.statusText}`);
    }
  } else {
    this.$message.error('网络连接错误，请检查网络');
  }
});